ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

仪表盘修改

Browse Source
qianming 3 years ago
parent 9c99f300fa
commit a34b2d9d5d
2 changed files with 452 additions and 162 deletions
Show Stats Download Patch File Download Diff File

254
report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gauge.js
Unescape Escape View File

@ -22,54 +22,270 @@ export const widgetGauge = {
placeholder: '', placeholder: '',
value: '仪表盘', value: '仪表盘',
}, },
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: "圆环设置",
list: [
{
type: 'el-switch',
label: '显示',
name: 'ringShow',
required: false,
placeholder: '',
value: true,
},
{ {
type: 'el-input-number', type: 'el-input-number',
label: '刻度线粗度', label: '圆环宽度',
name: 'tickMarkWeight', name: 'pieWeight',
require: false, require: false,
placeholder: '', placeholder: '',
value: 10, value: 10,
}, },
]
},
{
name: '0%~30%渐变色',
list: [
{
type: 'vue-color',
label: '0处颜色',
name: 'color30p0',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,0.1)'
},
{
type: 'vue-color',
label: '0.5处颜色',
name: 'color30p5',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,0.6)'
},
{
type: 'vue-color',
label: '1处颜色',
name: 'color30p10',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,1)'
},
]
},
{
name: '30%~70%渐变色',
list: [
{
type: 'vue-color',
label: '0处颜色',
name: 'color70p0',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,0.1)'
},
{
type: 'vue-color',
label: '0.5处颜色',
name: 'color70p5',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,0.6)'
},
{
type: 'vue-color',
label: '1处颜色',
name: 'color70p10',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,1)'
},
]
},
{
name: '70%~100%渐变色',
list: [
{
type: 'vue-color',
label: '0处颜色',
name: 'color100p0',
required: false,
placeholder: '',
value: 'rgba(175, 36, 74,0.1)'
},
{
type: 'vue-color',
label: '0.5处颜色',
name: 'color100p5',
required: false,
placeholder: '',
value: 'rgba(255, 36, 74,0.6)'
},
{
type: 'vue-color',
label: '1处颜色',
name: 'color100p10',
required: false,
placeholder: '',
value: 'rgba(255, 36, 74,1)'
},
]
},
{
name: "刻度线",
list: [
{ {
type: 'el-switch', type: 'el-switch',
label: '显示刻度值', label: '显示',
name: 'showScaleValue', name: 'tickShow',
require: false, required: false,
placeholder: '', placeholder: '',
value: true, value: true,
}, },
{ {
type: 'el-switch', type: 'el-input-number',
label: '显示刻度线', label: '距离',
name: 'showTickMarks', name: 'tickDistance',
require: false, require: false,
placeholder: '', placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '长度',
name: 'tickLength',
require: false,
placeholder: '',
value: 10,
},
{
type: 'el-input-number',
label: '宽度',
name: 'tickWidth',
require: false,
placeholder: '',
value: 2,
},
]
},
{
name: "指标线",
list: [
{
type: 'el-switch',
label: '显示',
name: 'splitShow',
required: false,
placeholder: '',
value: true, value: true,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
label: '刻度字号', label: '距离',
name: 'scaleFontSize', name: 'splitDistance',
require: false, require: false,
placeholder: '', placeholder: '',
value: 16, value: 0,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
label: '指标字号', label: '长度',
name: 'targetFontSize', name: 'splitLength',
require: false, require: false,
placeholder: '', placeholder: '',
value: 20, value: 20,
}, },
{
type: 'el-input-number',
label: '宽度',
name: 'splitWidth',
require: false,
placeholder: '',
value: 4,
},
]
},
{
name: "指标",
list: [
{
type: 'el-switch',
label: '显示',
name: 'labelShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '距离',
name: 'labelDistance',
require: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '字号',
name: 'labelFontSize',
require: false,
placeholder: '',
value: 10,
},
{ {
type: 'vue-color', type: 'vue-color',
label: '背景颜色', label: '颜色',
name: 'background', name: 'labelColor',
required: false, required: false,
placeholder: '', placeholder: '',
value: '' value: '#fff',
},
]
},
{
name: "数值",
list: [
{
type: 'vue-color',
label: '颜色',
name: 'labelColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字号',
name: 'labelFontSize',
require: false,
placeholder: '',
value: 10,
}, },
{
type: 'el-select',
label: '字体粗细',
name: 'labelFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
]
},
],
], ],
// 数据 // 数据
data: [ data: [
@ -108,7 +324,7 @@ export const widgetGauge = {
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: {value: 50, name: "名称", unit: "%"}, value: 50,
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -117,7 +333,7 @@ export const widgetGauge = {
required: false, required: false,
placeholder: 'px', placeholder: 'px',
relactiveDom: 'dataType', relactiveDom: 'dataType',
chartType: 'widget-gauge', chartType: 'widget-piechart',
dictKey: 'TEXT_PROPERTIES', dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData', relactiveDomValue: 'dynamicData',
value: '', value: '',
@ -159,4 +375,4 @@ export const widgetGauge = {
}, },
], ],
} }
} }

134
report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue
Unescape Escape View File

@ -1,10 +1,12 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize /> <v-chart :options="options" autoresize/>
</div> </div>
</template> </template>
<script> <script>
import echarts from "echarts";
export default { export default {
name: "WidgetGauge", name: "WidgetGauge",
components: {}, components: {},
@ -17,35 +19,108 @@ export default {
options: { options: {
series: [ series: [
{ {
name: "Pressure", type: 'gauge',
type: "gauge", z: 100,
detail: {
formatter: "{value}",
textStyle: {
fontSize: 12
}
},
axisLine: { axisLine: {
lineStyle: {
width: 10,
color: [
[
0.3,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: 'rgba(0, 237, 3,0.1)',
},
{
offset: 0.5,
color: 'rgba(0, 237, 3,0.6)',
},
{
offset: 1,
color: 'rgba(0, 237, 3,1)',
},
]),
],
[
0.7,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: 'rgba(255, 184, 0,0.1)',
},
{
offset: 0.5,
color: 'rgba(255, 184, 0,0.6)',
},
{
offset: 1,
color: 'rgba(255, 184, 0,1)',
},
]),
],
[
1,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: 'rgba(175, 36, 74,0.1)',
},
{
offset: 0.5,
color: 'rgba(255, 36, 74,0.6)',
},
{
offset: 1,
color: 'rgba(255, 36, 74,1)',
},
]),
],
],
},
},
pointer: {
itemStyle: {
color: 'auto',
},
},
axisTick: {
show: true, show: true,
distance: 0,
length: 10,
lineStyle: { lineStyle: {
width: 10 color: 'auto',
} width: 2,
},
},
splitLine: {
show: true,
distance: 0,
length: 14,
lineStyle: {
color: 'auto',
width: 4,
},
}, },
axisLabel: { axisLabel: {
show: true, show: true,
fontSize: 12 color: 'white',
distance: 2,
fontSize: 10,
}, },
axisTick: { detail: {
show: true valueAnimation: true,
formatter: '{value} %',
color: 'white',
fontSize: 18,
}, },
data: [ data: [
{ {
value: 50, value: 70,
name: "" },
} ],
] },
} ],
]
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
@ -72,8 +147,7 @@ export default {
this.optionsData = val.data; // 数据 this.optionsData = val.data; // 数据
this.optionsCollapse = val.collapse; // 折叠数据 this.optionsCollapse = val.collapse; // 折叠数据
this.optionsSetup = val.setup; // 样式 this.optionsSetup = val.setup; // 样式
this.setOptions(); this.editorOptions();
this.setOptionsData();
}, },
deep: true deep: true
} }
@ -83,10 +157,13 @@ export default {
this.optionsData = this.value.data; this.optionsData = this.value.data;
this.optionsCollapse = this.value.collapse; this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.setOptions(); this.editorOptions();
this.setOptionsData();
}, },
methods: { methods: {
editorOptions() {
// this.setOptions()
// this.setOptionsData()
},
setOptions() { setOptions() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
@ -107,14 +184,11 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const staticData = typeof val == "string" ? JSON.parse(val) : val; //const staticData = typeof val == "string" ? JSON.parse(val) : val;
const series = this.options.series; const series = this.options.series;
for (const key in series) { for (const key in series) {
series[key].detail.formatter = `{value}${staticData.unit}`; //series[key].detail.formatter = `{value}${val.unit}`;
series[key].data[0] = { series[key].data = val
value: staticData.value,
name: staticData.name
};
} }
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {

Write Preview
Loading…
Cancel
Save