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

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

@ -1,162 +1,378 @@
/*
* @Descripttion: 仪表盘 json
* @version:
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:30:25
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:30:25
*/
export const widgetGauge = {
code: 'widget-gauge',
type: 'chart',
label: '仪表盘',
icon: 'iconyibiaopan',
options: {
// 配置
setup: [
code: 'widget-gauge',
type: 'chart',
label: '仪表盘',
icon: 'iconyibiaopan',
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-input-text',
label: '图层名称',
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: [
name: "圆环设置",
list: [
{
code: 'staticData',
name: '静态数据',
type: 'el-switch',
label: '显示',
name: 'ringShow',
required: false,
placeholder: '',
value: true,
},
{
code: 'dynamicData',
name: '动态数据',
type: 'el-input-number',
label: '圆环宽度',
name: 'pieWeight',
require: false,
placeholder: '',
value: 10,
},
],
value: 'staticData',
]
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
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)'
},
]
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: {value: 50, name: "名称", unit: "%"},
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)'
},
]
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
chartType: 'widget-gauge',
dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
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)'
},
]
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
name: "刻度线",
list: [
{
type: 'el-switch',
label: '显示',
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',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
value: 0,
name: "指标线",
list: [
{
type: 'el-switch',
label: '显示',
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',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
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',
label: '颜色',
name: 'labelColor',
required: false,
placeholder: '',
value: '#fff',
},
]
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
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: [
{
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>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "WidgetGauge",
components: {},
@ -17,35 +19,108 @@ export default {
options: {
series: [
{
name: "Pressure",
type: "gauge",
detail: {
formatter: "{value}",
textStyle: {
fontSize: 12
}
},
type: 'gauge',
z: 100,
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,
distance: 0,
length: 10,
lineStyle: {
width: 10
}
color: 'auto',
width: 2,
},
},
splitLine: {
show: true,
distance: 0,
length: 14,
lineStyle: {
color: 'auto',
width: 4,
},
},
axisLabel: {
show: true,
fontSize: 12
color: 'white',
distance: 2,
fontSize: 10,
},
axisTick: {
show: true
detail: {
valueAnimation: true,
formatter: '{value} %',
color: 'white',
fontSize: 18,
},
data: [
{
value: 50,
name: ""
}
]
}
]
value: 70,
},
],
},
],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
@ -72,8 +147,7 @@ export default {
this.optionsData = val.data; // 数据
this.optionsCollapse = val.collapse; // 折叠数据
this.optionsSetup = val.setup; // 样式
this.setOptions();
this.setOptionsData();
this.editorOptions();
},
deep: true
}
@ -83,10 +157,13 @@ export default {
this.optionsData = this.value.data;
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.setOptions();
this.setOptionsData();
this.editorOptions();
},
methods: {
editorOptions() {
// this.setOptions()
// this.setOptionsData()
},
setOptions() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
@ -107,14 +184,11 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
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;
for (const key in series) {
series[key].detail.formatter = `{value}${staticData.unit}`;
series[key].data[0] = {
value: staticData.value,
name: staticData.name
};
//series[key].detail.formatter = `{value}${val.unit}`;
series[key].data = val
}
},
dynamicDataFn(val, refreshTime) {

Write Preview
Loading…
Cancel
Save