简柏林 / 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 30 // 柱状图
31 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 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 50 borderDistance: 1,
51 51 itemStyle: {
52 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 34 const { onMessage } = useOnMessage({
35 35 onReceiveDataSourceMessage(commandSource, message) {
36 36 const { data } = commandSource
  37 + const { deviceInfo, attrInfo } = data || {}
  38 + const { deviceName } = deviceInfo || {}
37 39 const { attr } = data as NodeDataDataSourceJsonType
38 40 const { latestValue } = useLatestMessageValue(message.data, attr)
39 41 unref(chartInstance)?.setOption({
  42 + title: {
  43 + text: `${deviceName || ''}-${attrInfo.name || ''}`,
  44 + },
40 45 series: [{
41 46 data: getSetValue(Number(latestValue)),
42 47 }],
... ...
1 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 11 series: [{
3 12 type: 'gauge',
4 13 min: 0,
... ...
... ... @@ -31,14 +31,20 @@ onMounted(() => {
31 31
32 32 const onReceiveDataSourceMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
33 33 const { data } = commandSource
34   - const { chartOption } = data || {}
  34 + const { chartOption, deviceInfo, attrInfo } = data || {}
  35 + const { deviceName } = deviceInfo || {}
35 36 const { unit } = chartOption || {}
36 37 const { attr } = data as NodeDataDataSourceJsonType
37 38 const { latestValue } = useLatestMessageValue(message.data, attr)
38 39 unref(chartInstance)?.setOption({
39 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 48 } as EChartsOption)
43 49 }
44 50
... ...
... ... @@ -51,24 +51,6 @@ export const setOption = (value: number = 40, circularFlowMeterOption: FlowMeter
51 51 borderDistance: 1,
52 52 itemStyle: {
53 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 34 const { onMessage } = useOnMessage({
35 35 onReceiveDataSourceMessage(commandSource, message) {
36 36 const { data } = commandSource
  37 + const { deviceInfo, attrInfo } = data || {}
  38 + const { deviceName } = deviceInfo || {}
37 39 const { attr } = data as NodeDataDataSourceJsonType
38 40 const { latestValue } = useLatestMessageValue(message.data, attr)
39 41 unref(chartInstance)?.setOption({
  42 + title: {
  43 + text: `${deviceName || ''}-${attrInfo.name || ''}`,
  44 + },
40 45 series: [{
41 46 data: getSetValue(Number(latestValue)),
42 47 }],
... ...
... ... @@ -26,9 +26,16 @@ function initChartInstance() {
26 26 const { onMessage } = useOnMessage({
27 27 onReceiveDataSourceMessage(commandSource, message) {
28 28 const { data } = commandSource
  29 + const { deviceInfo, attrInfo } = data || {}
  30 + const { deviceName } = deviceInfo || {}
29 31 const { attr } = data as NodeDataDataSourceJsonType
30 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
... ...