简柏林 / thingskit-scada · Commits

Commit 722457ac7a52a89abd5edef7831df587362f9c1a

Authored by loveumiko
1 parent 3bb9a118

fix: 图表组件添加显示设备属性名称

Inline Side-by-side
Showing 8 changed files with 55 additions and 41 deletions
@@ -30,9 +30,9 @@ @@ -30,9 +30,9 @@
30 // 柱状图 30 // 柱状图
31 this.createVertexTemplateEntry("shape=mxgraph.thingskit/histogramChartComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 400, 400, createUserObject({ [COMPONENT_KEY]: 'Histogram', [CATEGORY]: 'CHART' }), '柱状图', true, "text textbox textarea label"), 31 this.createVertexTemplateEntry("shape=mxgraph.thingskit/histogramChartComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 400, 400, createUserObject({ [COMPONENT_KEY]: 'Histogram', [CATEGORY]: 'CHART' }), '柱状图', true, "text textbox textarea label"),
32 // 流量计(圆形) 32 // 流量计(圆形)
33 - this.createVertexTemplateEntry("shape=mxgraph.thingskit/circularFlowMeterComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 150, 200, createUserObject({ [COMPONENT_KEY]: 'CircularFlowMeter', [CATEGORY]: 'CHART' }), '流量计（圆形）', true, "circular flow meter"), 33 + this.createVertexTemplateEntry("shape=mxgraph.thingskit/circularFlowMeterComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 200, 250, createUserObject({ [COMPONENT_KEY]: 'CircularFlowMeter', [CATEGORY]: 'CHART' }), '流量计（圆形）', true, "circular flow meter"),
34 // 流量计(方形) 34 // 流量计(方形)
35 - this.createVertexTemplateEntry("shape=mxgraph.thingskit/rectFlowMeterComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 150, 200, createUserObject({ [COMPONENT_KEY]: 'RectFlowMeter', [CATEGORY]: 'CHART' }), '流量计（正方形）', true, "rect flow meter"), 35 + this.createVertexTemplateEntry("shape=mxgraph.thingskit/rectFlowMeterComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 200, 250, createUserObject({ [COMPONENT_KEY]: 'RectFlowMeter', [CATEGORY]: 'CHART' }), '流量计（正方形）', true, "rect flow meter"),
36 // 温度计 36 // 温度计
37 this.createVertexTemplateEntry("shape=mxgraph.thingskit/thermometerComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 300, 400, createUserObject({ [COMPONENT_KEY]: 'Thermometer', [CATEGORY]: 'CHART' }), '温度计', true, "thermometer"), 37 this.createVertexTemplateEntry("shape=mxgraph.thingskit/thermometerComponent;verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;strokeColor=none;fontColor=#000000;align=center;textOpacity=100;fillColor=none;fontSize=16;", 300, 400, createUserObject({ [COMPONENT_KEY]: 'Thermometer', [CATEGORY]: 'CHART' }), '温度计', true, "thermometer"),
38 ] 38 ]
@@ -50,24 +50,24 @@ export const setOption = (value: number = 40, circularFlowMeterOption: FlowMeter @@ -50,24 +50,24 @@ export const setOption = (value: number = 40, circularFlowMeterOption: FlowMeter
50 borderDistance: 1, 50 borderDistance: 1,
51 itemStyle: { 51 itemStyle: {
52 borderWidth: 0, 52 borderWidth: 0,
53 - color: {  
54 - type: 'linear',  
55 - x: 0,  
56 - y: 0,  
57 - x2: 1,  
58 - y2: 0,  
59 - colorStops: [  
60 - {  
61 - offset: 0,  
62 - color: '#0b2355', // 这里设置水球外边框 0% 处的颜色  
63 - },  
64 - {  
65 - offset: 1,  
66 - color: '#195b9d', // 这里设置水球外边框 100% 处的颜色  
67 - },  
68 - ],  
69 - global: false,  
70 - }, 53 + // color: {
  54 + // type: 'linear',
  55 + // x: 0,
  56 + // y: 0,
  57 + // x2: 1,
  58 + // y2: 0,
  59 + // colorStops: [
  60 + // {
  61 + // offset: 0,
  62 + // color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
  63 + // },
  64 + // {
  65 + // offset: 1,
  66 + // color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
  67 + // },
  68 + // ],
  69 + // global: false,
  70 + // },
71 }, 71 },
72 }, 72 },
73 }, 73 },
@@ -34,9 +34,14 @@ function initChartInstance() { @@ -34,9 +34,14 @@ function initChartInstance() {
34 const { onMessage } = useOnMessage({ 34 const { onMessage } = useOnMessage({
35 onReceiveDataSourceMessage(commandSource, message) { 35 onReceiveDataSourceMessage(commandSource, message) {
36 const { data } = commandSource 36 const { data } = commandSource
  37 + const { deviceInfo, attrInfo } = data || {}
  38 + const { deviceName } = deviceInfo || {}
37 const { attr } = data as NodeDataDataSourceJsonType 39 const { attr } = data as NodeDataDataSourceJsonType
38 const { latestValue } = useLatestMessageValue(message.data, attr) 40 const { latestValue } = useLatestMessageValue(message.data, attr)
39 unref(chartInstance)?.setOption({ 41 unref(chartInstance)?.setOption({
  42 + title: {
  43 + text: `${deviceName || ''}-${attrInfo.name || ''}`,
  44 + },
40 series: [{ 45 series: [{
41 data: getSetValue(Number(latestValue)), 46 data: getSetValue(Number(latestValue)),
42 }], 47 }],
1 export const defaultOption = { 1 export const defaultOption = {
  2 + title: {
  3 + show: true,
  4 + textStyle: {
  5 + lineHeight: 10,
  6 + height: 10,
  7 + width: '100%',
  8 + overflow: 'hidden',
  9 + },
  10 + },
2 series: [{ 11 series: [{
3 type: 'gauge', 12 type: 'gauge',
4 min: 0, 13 min: 0,
@@ -31,14 +31,20 @@ onMounted(() => { @@ -31,14 +31,20 @@ onMounted(() => {
31 31
32 const onReceiveDataSourceMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => { 32 const onReceiveDataSourceMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
33 const { data } = commandSource 33 const { data } = commandSource
34 - const { chartOption } = data || {} 34 + const { chartOption, deviceInfo, attrInfo } = data || {}
  35 + const { deviceName } = deviceInfo || {}
35 const { unit } = chartOption || {} 36 const { unit } = chartOption || {}
36 const { attr } = data as NodeDataDataSourceJsonType 37 const { attr } = data as NodeDataDataSourceJsonType
37 const { latestValue } = useLatestMessageValue(message.data, attr) 38 const { latestValue } = useLatestMessageValue(message.data, attr)
38 unref(chartInstance)?.setOption({ 39 unref(chartInstance)?.setOption({
39 series: [{ 40 series: [{
40 - data: [{ value: latestValue }], detail: { formatter: `{value} ${unit || '℃'}` }, 41 + data: [{ value: latestValue }],
  42 + detail: { formatter: `{value} ${unit || '℃'}` },
  43 +
41 }], 44 }],
  45 + title: {
  46 + text: `${deviceName || ''}-${attrInfo.name || ''}`,
  47 + },
42 } as EChartsOption) 48 } as EChartsOption)
43 } 49 }
44 50
@@ -51,24 +51,6 @@ export const setOption = (value: number = 40, circularFlowMeterOption: FlowMeter @@ -51,24 +51,6 @@ export const setOption = (value: number = 40, circularFlowMeterOption: FlowMeter
51 borderDistance: 1, 51 borderDistance: 1,
52 itemStyle: { 52 itemStyle: {
53 borderWidth: 0, 53 borderWidth: 0,
54 - color: {  
55 - type: 'linear',  
56 - x: 0,  
57 - y: 0,  
58 - x2: 1,  
59 - y2: 0,  
60 - colorStops: [  
61 - {  
62 - offset: 0,  
63 - color: '#0b2355', // 这里设置水球外边框 0% 处的颜色  
64 - },  
65 - {  
66 - offset: 1,  
67 - color: '#195b9d', // 这里设置水球外边框 100% 处的颜色  
68 - },  
69 - ],  
70 - global: false,  
71 - },  
72 }, 54 },
73 }, 55 },
74 }, 56 },
@@ -34,9 +34,14 @@ function initChartInstance() { @@ -34,9 +34,14 @@ function initChartInstance() {
34 const { onMessage } = useOnMessage({ 34 const { onMessage } = useOnMessage({
35 onReceiveDataSourceMessage(commandSource, message) { 35 onReceiveDataSourceMessage(commandSource, message) {
36 const { data } = commandSource 36 const { data } = commandSource
  37 + const { deviceInfo, attrInfo } = data || {}
  38 + const { deviceName } = deviceInfo || {}
37 const { attr } = data as NodeDataDataSourceJsonType 39 const { attr } = data as NodeDataDataSourceJsonType
38 const { latestValue } = useLatestMessageValue(message.data, attr) 40 const { latestValue } = useLatestMessageValue(message.data, attr)
39 unref(chartInstance)?.setOption({ 41 unref(chartInstance)?.setOption({
  42 + title: {
  43 + text: `${deviceName || ''}-${attrInfo.name || ''}`,
  44 + },
40 series: [{ 45 series: [{
41 data: getSetValue(Number(latestValue)), 46 data: getSetValue(Number(latestValue)),
42 }], 47 }],
@@ -26,9 +26,16 @@ function initChartInstance() { @@ -26,9 +26,16 @@ function initChartInstance() {
26 const { onMessage } = useOnMessage({ 26 const { onMessage } = useOnMessage({
27 onReceiveDataSourceMessage(commandSource, message) { 27 onReceiveDataSourceMessage(commandSource, message) {
28 const { data } = commandSource 28 const { data } = commandSource
  29 + const { deviceInfo, attrInfo } = data || {}
  30 + const { deviceName } = deviceInfo || {}
29 const { attr } = data as NodeDataDataSourceJsonType 31 const { attr } = data as NodeDataDataSourceJsonType
30 const { latestValue } = useLatestMessageValue(message.data, attr) 32 const { latestValue } = useLatestMessageValue(message.data, attr)
31 - unref(chartInstance)?.setOption({ series: [{ data: [{ value: getShowValue(Number(latestValue)) }] }] } as EChartsOption) 33 + unref(chartInstance)?.setOption({
  34 + title: {
  35 + text: `${deviceName || ''}-${attrInfo.name || ''}`,
  36 + },
  37 + series: [{ data: [{ value: getShowValue(Number(latestValue)) }] }],
  38 + } as EChartsOption)
32 }, 39 },
33 }) 40 })
34 41