thing_web/public/scada/static/info-e6df7db4.js

const e="f31282bd-dd67-4c07-9951-ac7270c5a896",n="scroll-rank-board",t="滚动排名",a='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704849974974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18948" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M392.96 193.1264h502.784a43.9808 43.9808 0 1 1 0 87.9616h-502.784a43.9808 43.9808 0 0 1 0-87.9616z m0 274.944h502.784a43.9808 43.9808 0 1 1 0 87.9104h-502.784a43.9808 43.9808 0 1 1 0-87.9616z m0 274.8416h502.784a43.9808 43.9808 0 0 1 0 87.9616h-502.784a43.9808 43.9808 0 1 1 0-87.9616z" fill="#1296db" p-id="18949"></path><path d="M146.688 183.04l-28.8256 12.6976v-34.1504l39.424-22.8352h25.7536v163.1744h-36.352V183.04zM112.4864 540.1088q17.6128-15.872 30.8736-29.2864 13.312-13.4656 23.9104-28.672 10.6496-15.36 10.6496-26.624 0-11.6736-8.192-18.1248-8.0384-6.4512-21.0944-6.4512-9.3184 0-20.2752 3.84-10.9568 3.84-21.504 10.6496v-26.624q11.008-6.6048 24.9856-10.752 13.9264-4.2496 26.624-4.2496 25.7024 0 40.8064 12.8 15.0528 12.6464 15.0528 34.6112 0 15.616-10.496 33.4336-10.4448 17.7664-24.0128 31.6416-13.5168 13.8752-32.1024 30.464l-6.6048-4.5056h73.216v27.136H103.936v-21.7088l8.5504-7.5776zM156.16 839.3216q-24.4224 0-47.4624-10.3936v-31.232q10.24 7.3216 21.8624 10.9056 11.6736 3.584 23.296 3.584 13.0048 0 19.8656-5.632 7.0144-5.7344 7.0144-16.6912 0-12.3392-8.6528-18.6368-8.5504-6.3488-22.6304-6.3488h-23.2448v-23.9616h20.7872q13.7216 0 21.2992-6.144 7.6288-6.144 7.6288-17.0496 0-9.0624-6.912-14.1824-6.912-5.12-18.432-5.12-8.2432 0-18.432 2.2016-10.0864 2.2016-18.432 6.144v-25.344q9.216-4.9664 20.736-7.4752 11.4688-2.6624 22.784-2.6624 24.1664 0 38.1952 11.6224 14.08 11.6224 14.08 31.4368 0 12.4416-6.4512 22.272-6.3488 9.8304-18.2272 15.4624 14.1312 5.0176 21.76 15.36 7.68 10.2912 7.68 24.2176 0 13.9776-7.0656 24.7808-7.168 10.752-20.4288 16.7936-13.1584 6.0928-30.5664 6.0928z" fill="#1296db" p-id="18950"></path></svg>',o="svg",i="动态",l="数据展示",u=!1,c=!0,r="时序",s=`{"type":"page","id":"u:270584784ce1","name":"page1","asideResizor":false,"style":{"boxShadow":" 0px 0px 0px 0px transparent"},"pullRefresh":{"disabled":true},"body":[{"type":"tabs","name":"tab","tabs":[{"title":"样式","icon":"fa fa-th-large","body":[{"type":"form","title":"","name":"basicPropForm","body":[{"type":"input-text","label":"名称","name":"nodeAlias","id":"u:6b126f0520cb","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"input-text","label":"ID&nbsp;&nbsp;&nbsp;&nbsp;","name":"id","id":"u:6232710ac003","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"grid","id":"u:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","keyboard":true,"id":"u:dcc0c21d16f6","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:14cc19d6ffb0","md":6},{"body":[{"type":"input-number","label":"高度","name":"height","keyboard":true,"id":"u:cd6fdff9ca88","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:4931801ca9b8","md":6}]},{"type":"grid","id":"u:da449a94908a","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","keyboard":true,"id":"u:29852d093d9d","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:1b561d652acc","md":6},{"body":[{"type":"input-number","label":"Y 轴","name":"y","keyboard":true,"id":"u:dc8c1daed8ed","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizo
  "nodes": [
    {
      "id": "709113b2-7076-4e9b-8406-e0b2ad30c9e5",
      "type": "scroll-rank-board",
      "x": 200,
      "y": 200,
      "text": {
        "value": "",
        "x": 200,
        "y": 200
      },
      "properties": {
        "id": "709113b2-7076-4e9b-8406-e0b2ad30c9e5",
        "width": 500,
        "height": 200,
        "x": 200,
        "y": 200,
        "rotation": 0,
        "opacity": 1,
        "showRank": true,
        "enableCarousel": false,
        "waitTime": 2000,
        "showRatio": true,
        "divideInsideColumn": true,
        "fontSize": 12,
        "showDefaultValue": false,
        "showUnit": false,
        "valueColor": "rgba(8, 80, 164, 1)",
        "nodeAlias": "滚动排名",
        "rankColumnStyle": "return {\\r\\n    borderBottom: '1px solid rgba(74, 144, 226, 1)'\\r\\n}",
        "color": "rgba(16, 120, 242, 1)",
        "insideColumnStyle": "",
        "textColor": "rgba(8, 80, 164, 1)",
        "carousel": "single",
        "unit": "kWh",
        "rankFormat": "No.1",
        "unitColor": "rgba(8, 80, 164, 1)",
        "ratioColor": "rgba(8, 80, 164, 1)",
        "ratioSpace": 70,
        "nameColor": "rgba(8, 80, 164, 1)",
        "dividerWidth": 2,
        "dividerSpace": 4,
        "dividerBack": "rgba(255, 255, 255, 1)",
        "numberColor": "rgba(8, 80, 164, 1)",
        "rowNum": 5,
        "fontFamily": "Microsoft Yahei",
        "fontColor": "",
        "fontStyle": "",
        "gradientFontColor": "",
        "dynamic": {
          "normalData": {
            "dataPoint": "",
            "compareType": "",
            "conditionVariables": [],
            "defaultValue": "",
            "unit": "",
            "customDatasource": true,
            "dataFilterFn": "// datas 数据处理\\n// .....\\nconst defaultDatas = [\\n    {\\n        name: '周口',\\n        value: 55123,\\n    },\\n    {\\n        name: '南阳',\\n        value: 12022,\\n    },\\n    {\\n        name: '西峡',\\n        value: 78932\\n    },\\n    {\\n        name: '驻马店',\\n        value: 63411\\n    },\\n    {\\n        name: '新乡',\\n        value: 44231\\n    }\\n]\\n\\nreturn defaultDatas"
          }
        }
      }
    }
  ]
}`,javascript:`// 工具函数
/**
 * 精准判断对象类型
 * @param obj
 */
function typeOf(obj) {
    const toString = Object.prototype.toString
    const map = {
        '[object Boolean]': 'boolean',
        '[object Number]': 'number',
        '[object String]': 'string',
        '[object Function]': 'function',
        '[object Array]': 'array',
        '[object Date]': 'date',
        '[object RegExp]': 'regExp',
        '[object Undefined]': 'undefined',
        '[object Null]': 'null',
        '[object Object]': 'object',
    }
    return map[toString.call(obj)]
}

/**
 * 深拷贝
 * @param data
 */
function deepCopy(data) {
    const t = typeOf(data)
    let o

    if (t === 'array') {
        o = []
    } else if (t === 'object') {
        o = {}
    } else {
        return data
    }

    if (t === 'array') {
        for (let i = 0; i < data.length; i++) {
            o.push(deepCopy(data[i]))
        }
    } else if (t === 'object') {
        for (const i in data) {
            o[i] = deepCopy(data[i])
        }
    }
    return o
}

/**
 * 深覆盖
 * @param target
 * @param merged
 */
function deepMerge(target, merged) {
    for (const key in merged) {
        if (target[key] && typeof target[key] === 'object') {
            deepMerge(target[key], merged[key])
            continue
        }
        if (typeof merged[key] === 'object') {
            target[key] = deepCopy(merged[key])

            continue
        }
        target[key] = merged[key]
    }

    return target
}


/**
 * 节流函数，(限制函数的执行频率)返回函数连续调用���，空闲时间必须大于或等于 wait，func 才会执行
 * @param  {function} func        回调函数
 * @param  {number}   wait        表示时间窗口的间隔
 * @param immediate 是否立即执行 true 则先调用，false不先调用
 * @return {function}             返回客户调用函数
 */
function throttle(func, wait, immediate) {
    let timeoutID
    let lastExec = 0

    function wrapper() {
        const self = this
        const elapsed = Number(new Date()) - lastExec
        const args = arguments

        function clearExistingTimeout() {
            if (timeoutID) {
                clearTimeout(timeoutID)
            }
        }

        function clear() {
            timeoutID = undefined
        }

        function exec() {
            lastExec = Number(new Date())
            func.apply(self, args)
        }

        if (immediate && !timeoutID) {
            exec()
        }
        clearExistingTimeout()
        if (immediate === undefined && elapsed > wait) {
            exec()
        } else {
            timeoutID = setTimeout(immediate ? clear : exec, immediate === undefined ? wait - elapsed : wait)
        }
    }

    return wrapper
}

/**
 * 防抖函数，(限制函数的执行频率) 保证再一系列调用时间内，只调用一次
 *
 * @param  {function} func        回调函数
 * @param  {number}   wait        表示时间窗口的间隔
 * @return {function}             返回客户调用函数
 */
function debounce(func, wait) {
    return throttle(func, wait, false)
}


const { createApp, createVNode, render, nextTick, onBeforeUnmount, onUnmounted, onMounted, reactive, ref, toRefs, watch } = Vue;
const app = createApp({})

function useAutoResize(props, afterResizeFun) {
    const domRef = ref(null) // dorm容器，默认设置为domRef
    const status = reactive({
        width: 0,
        height: 0,
    })
    let __resizeHandler = null

    function resize(resize = true) {
        nextTick().then(() => {
            const dom = domRef.value
            status.width = dom ? dom.clientWidth : 0
            status.height = dom ? dom.clientHeight : 0

            if (!dom) {
                console.warn('fei-datav: Failed to get dom node, component rendering may be abnormal!')
            } else if (!status.width || !status.height) {
                console.warn('fei-datav: Component width or height is 0px, rendering abnormality may occur!')
            }

            if (typeof afterResizeFun === 'function' && resize) afterResizeFun()
        })
    }

    watch([() => props.containerWidth, () => props.containerHeight], () => {
        __resizeHandler && __resizeHandler();
    })

    onMounted(() => {
        setTimeout(() => {
            resize();
        }, 500)
        __resizeHandler = debounce(resize, 100)
    })

    return {
        domRef,
        ...toRefs(status),
        resize,
    }
}

const ScrollRankBoard = {
    template: \`
        <div ref="domRef" class="dv-scroll-ranking-board" :style="{color: textColor}">
    <div
      v-for="(item, i) in rows"
      :key="item.toString() + item.scroll"
      class="row-item"
      :style="getRowItemStyle(heights, i)"
    >
      <div class="ranking-info" :style="{fontSize: fontSize}">
        <div v-if="showRank" class="rank" :style="{color: numberColor || color }">
          {{ getRanking(item, rankFormat) }}
        </div>
        <div class="info-name" v-html="item.name" :style="{color: nameColor || textColor }"/>
        <div v-if="showRatio" :style="getRatioStyle(ratioColor, ratioSpace)">{{item.percent.toFixed(2) + '%'}}</div>
        <div class="ranking-value" v-html="getValueUnit(mergedConfig, item, valueColor, unitColor, fontFamily, fontStyle, gradientFontColor)"></div>
      </div>

      <div class="ranking-column" :style="getRankingColumnStyle(rankColumnStyle)">
        <div
          ref="insideColRefs"
          class="inside-column"
          :style="getInsideColumnStyle(item, color, insideColumnStyle)"
        >
          <div v-if="divideInsideColumn" class="dividerColumn" v-html="dividerColumnContent(containerWidth, containerHeight, item, i, dividerWidth, dividerSpace, dividerBack)"></div>
          <div class="shine" />
        </div>
      </div>
    </div>
  </div>
    \`,
    name: 'ScrollRankingBoard',
    props: {
        config: {
            type: Object,
            default: () => ({}),
        },
        containerWidth: {
            type: Number,
            default: 500,
        },
        containerHeight: {
            type: Number,
            default: 200,
        },
        rankColumnStyle: {
            type: String,
            default: '',
        },
        insideColumnStyle: {
            type: String,
            default: '',
        },
        enableCarousel: {
            type: Boolean,
            default: false
        },
        showRank: {
            type: Boolean,
            default: false
        },
        showRatio: {
            type: Boolean,
            default: false
        },
        nameColor: {
            type: String,
            default: 'rgba(8, 80, 164, 1)',
        },
        valueColor: {
            type: String,
            default: 'rgba(8, 80, 164, 1)',
        },
        unitColor: {
            type: String,
            default: 'rgba(8, 80, 164, 1)',
        },
        ratioColor: {
            type: String,
            default: 'rgba(8, 80, 164, 1)',
        },
        numberColor: {
            type: String,
            default: 'rgba(8, 80, 164, 1)',
        },
        rankFormat: {
            type: String,
            default: 'No.1',
        },
        ratioSpace: {
            type: Number,
            default: 70
        },
        divideInsideColumn: {
            type: Boolean,
            default: false
        },
        dividerWidth: {
            type: Number,
            default: 2
        },
        dividerSpace: {
            type: Number,
            default: 2
        },
        dividerBack: {
            type: String,
            default: '#fff',
        },
        fontFamily: {
            type: String,
            default: '',
        }, 
        fontColor: {
            type: String,
            default: '',
        }, 
        fontStyle: {
            type: String,
            default: '',
        }, 
        gradientFontColor: {
            type: String,
            default: '',
        }
    },
    computed: {
        getRowItemStyle: () => (heights, i) => {
            return {
                height: heights[i] + 'px',
            }
        },
        getRankingColumnStyle: () => (rankColumnStyle) => {
            const fn = new Function('', rankColumnStyle);
            let styles = {};
            const styleObj = fn();
            if (styleObj && typeof styleObj === 'object') {
                styles = {
                    ...styleObj
                }
            }
            return {
                ...styles
            }
        },
        getInsideColumnStyle: () => (item, color, insideColumnStyle) => {
            const fn = new Function('', insideColumnStyle);
            let styles = {};
            const styleObj = fn();
            if (styleObj && typeof styleObj === 'object') {
                styles = {
                    ...styleObj
                }
            }
            return {
                width: item.percent + '%',
                background: color,
                ...styles
            }
        },
        getValueUnit: () => (mergedConfig, item, valueColor, unitColor, fontFamily, fontStyle, gradientFontColor) => {
            const style = {};
            if(fontStyle) {
                if (fontStyle.includes('bold')) {
                    style.fontWeight = 'bold';
                }
                if(fontStyle.includes('italic')) {
                    style.fontStyle = 'italic'
                }
                if (fontStyle.includes('underline,line-through')) {
                    style.textDecoration = 'underline line-through'
                } else if (fontStyle.includes('line-through,underline')) {
                    style.textDecoration = 'line-through underline'
                } else if (fontStyle.includes('underline')) {
                    style.textDecoration = 'underline'
                } else if (fontStyle.includes('line-through')) {
                    style.textDecoration = 'line-through'
                }
            }
            if (mergedConfig.valueFormatter) {
                return mergedConfig.valueFormatter(item, valueColor, unitColor)
            } else {
                return \`<span style='color: \${gradientFontColor || valueColor}; font-family: \${fontFamily};font-weight: \${style.fontWeight}; font-style: \${style.fontStyle};text-decoration: \${style.textDecoration}'>\${item.value}</span><span style='color: \${unitColor}; margin-left: 3px'>\${mergedConfig.unit}</span>\`
            }
        },
        getRanking: () => (item, rankFormat) => {
            if (rankFormat === 'No.1') {
                return \`No.\${item.ranking}\`
            } else if (rankFormat === '1.') {
                return \`\${item.ranking}.\`;
            } else if (rankFormat === '1.') {
                return \`\${item.ranking}\`
            }
        },
        getRatioStyle: () => (ratioColor, ratioSpace) => {
            return {
                color: ratioColor,
                flex: \`0 0 \${ratioSpace}%\`,
                textAlign: 'left'
            }
        },
        dividerColumnContent: () => (width, height, item, ri, dividerWidth, dividerSpace, dividerBack) => {
            const totalDividers = Math.floor(width * (item.percent/100) / (dividerWidth + dividerSpace));
            const arr = new Array(totalDividers).fill('');
            let strs = '';
            arr.forEach((_, index) => {
                const span = \`<span style='float: left; display: inline-block; width: \${dividerWidth}px; height: 100%; background: \${dividerBack}; margin-left: \${dividerSpace}px'></span>\`;
                strs += span;
            })
            return strs;
        }
    },
    emits: ['mouseover', 'click'],
    setup(props, { emit }) {
        const { onMounted, onUnmounted, watch, reactive, ref, toRefs, computed } = Vue;

        const insideColRefs = ref([]);
        const dividerColumnContents = ref([]);

        function calcData() {
            stopAnimation()
            mergeConfig()
            calcRowsData()
            calcHeights()
            animation(true)
        }


        const { domRef, width, height, resize } = useAutoResize(props, calcData)

        const defaultConfig = ref({
            /**
                 * @description Board data
                 * @type {Array<Object>}
                 * @default data = []
                 */
            data: [],
            /**
                 * @description Row num
                 * @type {Number}
                 * @default rowNum = 5
                 */
            rowNum: 5,
            /**
                 * @description Scroll wait time
                 * @type {Number}
                 * @default waitTime = 2000
                 */
            waitTime: 2000,
            /**
                 * @description Carousel type
                 * @type {String}
                 * @default carousel = 'single'
                 * @example carousel = 'single' | 'page'
                 */
            carousel: 'single',
            /**
                 * @description Value unit
                 * @type {String}
                 * @default unit = ''
                 * @example unit = 'ton'
                 */
            unit: '',
            /**
                 * @description Auto sort by value
                 * @type {Boolean}
                 * @default sort = true
                 */
            sort: true,
            /**
                 * @description Value formatter
                 * @type {Function}
                 * @default valueFormatter = null
                 */
            valueFormatter: null,
            /**
                 * @description Text color
                 * @type {String}
                 * @default textColor = '#fff'
                 */
            textColor: '#fff',
            /**
                 * @description Main theme color
                 * @type {String}
                 * @default color = '#1370fb'
                 */
            color: '#1370fb',
            /**
                 * @description Font size
                 * @type {Number}
                 * @default fontSize = 13
                 */
            fontSize: 13,
        })

        const status = reactive({
            mergedConfig: null,

            rowsData: [],

            rows: [],

            heights: [],

            avgHeight: 0,

            animationIndex: 0,

            animationHandler: '',

            updater: 0,
        })

        watch(() => props.config, () => {
            stopAnimation()

            calcData()
        }, {
            deep: true,
        })

        const textColor = computed(() => {
            return props.config.textColor ? props.config.textColor : defaultConfig.value.textColor
        })

        const color = computed(() => {
            return props.config.color ? props.config.color : defaultConfig.value.color
        })

        const fontSize = computed(() => {
            return \`\${props.config.fontSize ? props.config.fontSize : defaultConfig.value.fontSize}px\`
        })

        onUnmounted(() => {
            stopAnimation()
        })


        function onResize() {
            if (!status.mergedConfig)
                return

            calcHeights(true)
        }

        function mergeConfig() {
            status.mergedConfig = deepMerge(deepCopy(defaultConfig.value, true), props.config || {})
        }

        function calcRowsData() {
            let { data } = status.mergedConfig
            const { rowNum, sort } = status.mergedConfig

            sort && data.sort(({ value: a }, { value: b }) => {
                if (a > b)
                    return -1
                else if (a < b)
                    return 1
                else
                    return 0
            })

            const value = data.map(({ value }) => value)

            const min = Math.min(...value) || 0

            // abs of min
            const minAbs = Math.abs(min)

            const max = Math.max(...value) || 0

            // abs of max
            const maxAbs = Math.abs(max)

            const total = max + minAbs

            data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))

            const rowLength = data.length

            if (rowLength > rowNum && rowLength < 2 * rowNum)
                data = [...data, ...data]

            data = data.map((d, i) => ({ ...d, scroll: i }))

            status.rowsData = data
            status.rows = data
        }

        function calcHeights(onresize = false) {
            const { rowNum, data } = status.mergedConfig

            const avgHeight = height.value / rowNum

            status.avgHeight = avgHeight

            if (!onresize)
                status.heights = new Array(data.length).fill(avgHeight)
        }

        const isSingle = computed(() => status.mergedConfig.carousel === 'single')

        async function animation(start = false) {
            if (!props.enableCarousel) return;
            const { waitTime, rowNum } = status.mergedConfig

            const rowLength = status.rowsData.length
            if (rowNum >= rowLength) return
            const { updater } = status
            if (start) {
                await new Promise(resolve => setTimeout(resolve, waitTime))
                if (updater !== status.updater)
                    return
            }

            const animationNum = isSingle.value ? 1 : rowNum

            const rows = status.rowsData.slice(status.animationIndex)
            rows.push(...status.rowsData.slice(0, status.animationIndex))

            status.rows = rows.slice(0, isSingle.value ? rowNum + 1 : rowNum * 2)
            status.heights = new Array(status.rows.length).fill(status.avgHeight)

            await new Promise(resolve => setTimeout(resolve, 300))
            if (updater !== status.updater)
                return

            status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))

            status.animationIndex += animationNum

            const back = status.animationIndex - rowLength
            if (back >= 0)
                status.animationIndex = back

            status.animationIndex += animationNum
            status.animationHandler = setTimeout(animation, waitTime - 300)
        }

        function stopAnimation() {
            status.updater = (status.updater + 1) % 999999

            if (!status.animationHandler)
                return

            clearTimeout(status.animationHandler)
        }

        watch(() => props.config, () => {
            stopAnimation()
            status.animationIndex = 0
            calcData()
        }, { deep: true })

        onUnmounted(() => {
            stopAnimation()
        })

        return {
            defaultConfig,
            ...toRefs(status),
            domRef,
            color,
            textColor,
            fontSize,
            insideColRefs,
        }
    }
}

const defaultDatas = [
    {
        name: '周口',
        value: 55123,
    },
    {
        name: '南阳',
        value: 12022,
    },
    {
        name: '西峡',
        value: 78932
    },
    {
        name: '驻马店',
        value: 63411
    },
    {
        name: '新乡',
        value: 44231
    },
    {
        name: '信阳',
        value: 44531
    },
    {
        name: '郑州',
        value: 42531
    }
]

class ScrollRankBoardNode extends HtmlResize.view {
    tableDatas = defaultDatas
    instance = null

    setHtml(rootEl) {
        if (!rootEl) return;
        const { graphModel, model } = this.props;
        const { properties, width, height, } = this.props.model;
        const { normalData } = properties.dynamic || {};
        const { customApiDatas } = normalData || {};

        const {
            rowNum, waitTime = 2000, color, textColor, fontSize, rankColumnStyle, insideColumnStyle,
            carousel, unit, enableCarousel, showRank, nameColor, valueColor, unitColor, showRatio, ratioColor,
            rankFormat, ratioSpace, divideInsideColumn, dividerWidth, dividerSpace, dividerBack, numberColor,
            fontFamily, fontColor, fontStyle, gradientFontColor} = properties;

        // 如果采用来自自定义数据源的数据
        if (customApiDatas) {
            this.tableDatas = customApiDatas || this.tableDatas;
        }

        if (this.instance) {
            // 实时数据不能推送一次就创建一次图表，可以在原有实例基础之上更改数据。
            Object.assign(this.instance.component.props, {
                name: properties.nodeAlias,
                config: {
                    data: this.tableDatas,
                    rowNum: rowNum,
                    waitTime: parseInt(waitTime),
                    carousel: carousel,
                    unit: unit,
                    sort: true,
                    valueFormatter: null,
                    color, textColor, fontSize,
                },
                containerWidth: width,
                containerHeight: height,
                rankColumnStyle, insideColumnStyle,
                enableCarousel, showRank, fontFamily, fontColor, fontStyle, gradientFontColor,
                nameColor, valueColor, unitColor, showRatio, ratioColor, numberColor,
                rankFormat, ratioSpace, divideInsideColumn, dividerWidth, dividerSpace, dividerBack
            })
            return
        }
        const el = document.createElement('div');
        rootEl.innerHTML = '';
        el.style.height = '100%';
        const instance = createVNode(ScrollRankBoard, {
            name: properties.nodeAlias,
            config: {
                data: this.tableDatas,
                rowNum: rowNum,
                waitTime: parseInt(waitTime),
                carousel: carousel,
                unit: unit,
                sort: true,
                valueFormatter: null,
                color, textColor, fontSize,
            },
            containerWidth: width,
            containerHeight: height,
            rankColumnStyle, insideColumnStyle,
            enableCarousel, showRank,  fontFamily, fontColor, fontStyle, gradientFontColor,
            nameColor, valueColor, unitColor, showRatio, ratioColor, numberColor,
            rankFormat, ratioSpace, divideInsideColumn, dividerWidth, dividerSpace, dividerBack
        })
        instance.appContext = app._context
        render(instance, el)
        rootEl.appendChild(el);
        this.instance = instance;
    }
}

class ScrollRankBoardModel extends HtmlResize.model {
    initNodeData(data) {
        // 自定义组件，需最开始重置一下text 。
        data.text = {
            value: "",
            x: data.x,
            y: data.y,
        };

        super.initNodeData(data);
        const { properties } = this;
        this.width = properties.width || 80;
        this.height = properties.height || 35;
        this.text.editable = false; // 不允许文本被编辑
    }

    setAttributes() {
        // 自定义组件需重置 text
        const { x, y, properties } = this;
        const { textHorizontalMove = 0, textVerticalMove = 0 } = properties;
        this.text = {
            ...this.text,
            x: x + textHorizontalMove,
            y: y + textVerticalMove,
            value: "",
        }
    }
}

lf.register({
    type: 'scroll-rank-board',
    view: ScrollRankBoardNode,
    model: ScrollRankBoardModel,
})`,css:`.dv-scroll-ranking-board {\r
  width: 100%;\r
  height: 100%;\r
  overflow: hidden;\r
}\r
\r
.dv-scroll-ranking-board .row-item {\r
    transition: all 0.3s;\r
    display: flex;\r
    flex-direction: column;\r
    justify-content: center;\r
    overflow: hidden;\r
}\r
\r
.dv-scroll-ranking-board .ranking-info {\r
    display: flex;\r
    width: 100%;\r
}\r
.dv-scroll-ranking-board .ranking-info .rank {\r
      width: 40px;\r
}\r
\r
.dv-scroll-ranking-board .ranking-info .info-name {\r
    flex: 1;\r
    text-align: left;\r
}\r
\r
.dv-scroll-ranking-board .ranking-column {\r
    margin-top: 5px;\r
}\r
\r
.dv-scroll-ranking-board .ranking-column .inside-column {\r
      position: relative;\r
      height: 6px;\r
      margin-bottom: 2px;\r
      border-radius: 1px;\r
      overflow: hidden;\r
}\r
.dv-scroll-ranking-board .ranking-column .inside-column .dividerColumn {\r
     position: absolute;\r
     top: 0;\r
     right: 0;\r
     left: 0;\r
     bottom: 0;\r
     z-index: 10;\r
     overflow: hidden;\r
}\r
\r
.dv-scroll-ranking-board .ranking-column .shine {\r
      position: absolute;\r
      left: 0%;\r
      top: 2px;\r
      height: 2px;\r
      width: 50px;\r
      transform: translateX(-100%);\r
      background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);\r
      animation: shine 3s ease-in-out infinite alternate;\r
}\r
\r
@keyframes shine {\r
  80% {\r
    left: 0%;\r
    transform: translateX(-100%);\r
  }\r
\r
  100% {\r
    left: 100%;\r
    transform: translateX(0%);\r
  }\r
}`,fakeData:""},m={id:e,name:n,aliasName:t,image:a,imageType:o,groupName:i,groupType:l,isRemote:!1,isDefault:!0,sectionType:r,config:s,files:d};export{t as aliasName,s as config,m as default,d as files,i as groupName,l as groupType,e as id,a as image,o as imageType,c as isDefault,u as isRemote,n as name,r as sectionType};