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

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

@ -7,156 +7,372 @@
* @LastEditTime: 2021-08-29 07:30:25 * @LastEditTime: 2021-08-29 07:30:25
*/ */
export const widgetGauge = { export const widgetGauge = {
code: 'widget-gauge', code: 'widget-gauge',
type: 'chart', type: 'chart',
label: '仪表盘', label: '仪表盘',
icon: 'iconyibiaopan', icon: 'iconyibiaopan',
options: { options: {
// 配置 // 配置
setup: [ setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '仪表盘',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{ {
type: 'el-input-text', name: "圆环设置",
label: '图层名称', list: [
name: 'layerName',
required: false,
placeholder: '',
value: '仪表盘',
},
{
type: 'el-input-number',
label: '刻度线粗度',
name: 'tickMarkWeight',
require: false,
placeholder: '',
value: 10,
},
{
type: 'el-switch',
label: '显示刻度值',
name: 'showScaleValue',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '显示刻度线',
name: 'showTickMarks',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '刻度字号',
name: 'scaleFontSize',
require: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '指标字号',
name: 'targetFontSize',
require: false,
placeholder: '',
value: 20,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{ {
code: 'staticData', type: 'el-switch',
name: '静态数据', label: '显示',
name: 'ringShow',
required: false,
placeholder: '',
value: true,
}, },
{ {
code: 'dynamicData', type: 'el-input-number',
name: '动态数据', label: '圆环宽度',
name: 'pieWeight',
require: false,
placeholder: '',
value: 10,
}, },
], ]
value: 'staticData',
}, },
{ {
type: 'el-input-number', name: '0%~30%渐变色',
label: '刷新时间(毫秒)', list: [
name: 'refreshTime', {
relactiveDom: 'dataType', type: 'vue-color',
relactiveDomValue: 'dynamicData', label: '0处颜色',
value: 5000 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)'
},
]
}, },
{ {
type: 'el-button', name: '30%~70%渐变色',
label: '静态数据', list: [
name: 'staticData', {
required: false, type: 'vue-color',
placeholder: 'px', label: '0处颜色',
relactiveDom: 'dataType', name: 'color70p0',
relactiveDomValue: 'staticData', required: false,
value: {value: 50, name: "名称", unit: "%"}, 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)'
},
]
}, },
{ {
type: 'dycustComponents', name: '70%~100%渐变色',
label: '', list: [
name: 'dynamicData', {
required: false, type: 'vue-color',
placeholder: 'px', label: '0处颜色',
relactiveDom: 'dataType', name: 'color100p0',
chartType: 'widget-gauge', required: false,
dictKey: 'TEXT_PROPERTIES', placeholder: '',
relactiveDomValue: 'dynamicData', value: 'rgba(175, 36, 74,0.1)'
value: '', },
{
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)'
},
]
}, },
],
// 坐标
position: [
{ {
type: 'el-input-number', name: "刻度线",
label: '左边距', list: [
name: 'left', {
required: false, type: 'el-switch',
placeholder: 'px', label: '显示',
value: 0, name: 'tickShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '距离',
name: 'tickDistance',
require: false,
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,
},
]
}, },
{ {
type: 'el-input-number', name: "指标线",
label: '上边距', list: [
name: 'top', {
required: false, type: 'el-switch',
placeholder: 'px', label: '显示',
value: 0, name: 'splitShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '距离',
name: 'splitDistance',
require: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '长度',
name: 'splitLength',
require: false,
placeholder: '',
value: 20,
},
{
type: 'el-input-number',
label: '宽度',
name: 'splitWidth',
require: false,
placeholder: '',
value: 4,
},
]
}, },
{ {
type: 'el-input-number', name: "指标",
label: '宽度', list: [
name: 'width', {
required: false, type: 'el-switch',
placeholder: '该容器在1920px大屏中的宽度', label: '显示',
value: 400, 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',
label: '颜色',
name: 'labelColor',
required: false,
placeholder: '',
value: '#fff',
},
]
}, },
{ {
type: 'el-input-number', name: "数值",
label: '高度', list: [
name: 'height', {
required: false, type: 'vue-color',
placeholder: '该容器在1080px大屏中的高度', label: '颜色',
value: 200, 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: [
{
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: 50,
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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: 200,
},
],
} }
}

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