hwmom-ui/src/views/boardGenerate/nodes/board/dashboardNode.vue

<template>
  <div
    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
    <NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />

    <div class="custom-node"
         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
      <div style="width: 100%;height: 100%" ref="chartRef" />
    </div>
    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
import * as echarts from 'echarts';

const props = defineProps({
  isView: {
    type: Boolean,
    required: false
  },
  inputData: {
    type: Object,
    required: false
  },
  id: {
    type: String,
    required: true
  },
  isHideHandle: {
    type: Boolean,
    required: false
  },
  selected: {
    type: Boolean,
    required: false
  },
  data: {
    type: Object,
    required: true
  },
  dimensions: {
    type: Object,
    required: true
  }
});
const chartRef = ref();
let chart = null;
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const getOption = () => {
  const chartOption = {
    title: {
      text: props.data.options.title || '设备运行数量',
      textStyle: {
        fontSize: 12,
        fontWeight: 400,
        color: '#fff'
      },
      left: '0',
      top: '5%'
    },
    grid: {
      top: '30%',
      bottom: '10%'
    },
    series: [
      {
        type: 'gauge',
        progress: {
          show: true,
          width: props.dimensions.width / 30
        },
        axisLine: {
          lineStyle: {
            width: props.dimensions.width / 30
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          length: props.dimensions.width / 30,
          lineStyle: {
            width: 2,
            color: '#fff'
          }
        },
        axisLabel: {
          distance: props.dimensions.width / 30 + 10,
          color: '#fff',
          fontSize: props.dimensions.width / 30
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 25,
          itemStyle: {
            borderWidth: 6
          }
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: props.dimensions.width / 10,
          offsetCenter: [0, '70%']
        },
        data: [
          {
            value: 70
          }
        ]
      }
    ]
  };
  return {
    ...chartOption
  };
};
onMounted(() => {
  chart = echarts.init(chartRef.value, 'macarons', {
    renderer: 'svg'
  });
  chart.setOption(getOption(), true);
});
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    chart && chart.setOption(getOption(), true);
  }
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    chart?.resize();
    chart && chart.setOption(getOption(), true);
  }
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
  chart.resize();
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  width: 100%;
  height: 100%;
}

</style>