thing_web/public/scada/previewScripts/Polyline.js

import { getShapeStyleFuction, getTextStyleFunction } from './getShapeStyleUtil.js'

const { PolylineEdge, PolylineEdgeModel } = window

// 折线
class PolylineEdgeConnection extends PolylineEdge {
  getEndArrow() {
    const h = window.h
    const { model, graphModel } = this.props
    const {
      id,
      properties: { arrowType, borderColor },
    } = model
    const { stroke, strokeWidth } = model.getArrowStyle()
    const pathAttr = {
      stroke,
      strokeWidth,
    }
    if (arrowType === 'empty') {
      // 空心箭头
      return h('path', {
        ...pathAttr,
        fill: '#FFF',
        d: 'M 0 0 -10 -5 -10 5 z',
      })
    }
    else if (arrowType === 'half') {
      // 半箭头
      return h('path', {
        ...pathAttr,
        d: 'M 0 0 -10 5',
      })
    }
    else if (arrowType === 'none') {
      // 无箭头
      return h('path', {
        ...pathAttr,
        d: '',
      })
    }
    return h('path', {
      ...pathAttr,
      fill: borderColor,
      d: 'M 0 0 -10 -5 -10 5 z',
    })
  }
}
class Model extends PolylineEdgeModel {
  constructor(data, graphModel) {
    super(data, graphModel)
    this.strokeWidth = 1
  }

  getEdgeAnimationStyle() {
    const animation = super.getEdgeAnimationStyle()
    const { borderColor, strokeDashWidth, strokeDashWidth2, strokeDashSpace, animationName, animationDuration, animationReverse } = this.properties
    animation.stroke = borderColor
    animation.strokeDashoffset = ''
    animation.strokeDasharray = `${strokeDashWidth},${strokeDashSpace},${strokeDashWidth2}`
    animation.animationName = animationName || 'lf_animate_dash'
    animation.animationDuration = animationDuration || '20s'
    animation.animationDirection = animationReverse ? 'reverse' : ''
    return animation
  }

  setAttributes() {
    const { defaultValue, min, max } = this.properties
    if (defaultValue) {
      const realValue = window.resolveScadaNewValue(defaultValue)
      const realMin = min < max ? min : max
      const realMax = max > min ? max : min
      if (realValue >= realMin && realValue <= realMax)
        this.isAnimation = true

      else
        this.isAnimation = false
    }
    else {
      this.isAnimation = this.properties.isAnimation || false
    }
  }

  getTextStyle() {
    const style = super.getTextStyle()
    return getTextStyleFunction(style, this.properties)
  }

  getEdgeStyle() {
    const attributes = super.getEdgeStyle()
    const properties = this.properties
    const style = getShapeStyleFuction(attributes, properties)
    return { ...style, fill: 'none' }
  }
}
export default {
  type: 'pro-polyline',
  view: PolylineEdgeConnection,
  model: Model,
}