thing_web/public/scada/static/info-316584da.js

const e="12c27a03-dac1-453a-9613-7b968809a6e4",t="custom-video-node",a="视频",n='<?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="1698736153051" class="icon" viewBox="0 0 1039 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4941" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.9296875" height="200"><path d="M808.015066 752.090395h-539.962335c-84.851224 0-154.274953-69.423729-154.274953-154.274952v-308.549906c0-84.851224 69.423729-154.274953 154.274953-154.274953h539.962335c84.851224 0 154.274953 69.423729 154.274953 154.274953v308.549906c0 84.851224-69.423729 154.274953-154.274953 154.274952z m-539.962335-539.962335c-42.425612 0-77.137476 34.711864-77.137477 77.137477v308.549906c0 42.425612 34.711864 77.137476 77.137477 77.137476h539.962335c42.425612 0 77.137476-34.711864 77.137476-77.137476v-308.549906c0-42.425612-34.711864-77.137476-77.137476-77.137477h-539.962335z" fill="#388CEB" p-id="4942"></path><path d="M499.46516 617.099812c-23.141243 0-44.354049-5.785311-61.709981-17.355933-40.497175-26.998117-59.781544-80.99435-53.996234-161.9887 3.856874-82.922787 26.998117-133.062147 71.352166-156.20339 44.354049-23.141243 100.278719-11.570621 171.630885 32.783428s104.135593 90.636535 102.207157 140.775894c-1.928437 50.13936-40.497175 90.636535-115.706215 129.205273-42.425612 23.141243-80.99435 32.783427-113.777778 32.783428z m5.785311-269.981168c-7.713748 0-11.570621 1.928437-13.499059 1.928437-17.355932 7.713748-26.998117 42.425612-30.85499 90.636535-3.856874 71.352166 13.499058 88.708098 19.284369 94.493408 7.713748 5.785311 32.783427 13.499058 98.350282-19.284369 67.495292-32.783427 73.280603-57.853107 73.280603-63.638418 0-5.785311-3.856874-30.854991-65.566855-71.352165-40.497175-25.06968-65.566855-32.783427-80.99435-32.783428z" fill="#E78E00" p-id="4943"></path><path d="M750.161959 906.365348h-424.256121c-21.212806 0-38.568738-17.355932-38.568738-38.568738s17.355932-38.568738 38.568738-38.568738h424.256121c21.212806 0 38.568738 17.355932 38.568738 38.568738s-17.355932 38.568738-38.568738 38.568738z" fill="#388CEB" p-id="4944"></path></svg>',i="svg",l="动态",o="数据展示",r=!1,u=!0,s="时间",d=`{"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"
  "nodes": [
    {
      "id": "8d19f781-13fc-4aa4-877f-dce151430b80",
      "type": "custom-video-node",
      "x": 200,
      "y": 200,
      "text": {
        "value": "",
        "x": 200,
        "y": 200
      },
      "properties": {
        "id": "8d19f781-13fc-4aa4-877f-dce151430b80",
        "width": 600,
        "height": 300,
        "x": 200,
        "y": 200,
        "rotation": 0,
        "opacity": 1,
        "nodeAlias": "视频",
        "showDefaultValue": false,
        "showUnit": false,
        "valueColor": "rgba(245, 166, 35, 1)",
        "fontSize": 12,
        "linkAddress": "https://vjs.zencdn.net/v/oceans.mp4",
        "fitStyle": "fill",
        "dynamic": {}
      }
    }
  ]
}`,javascript:`const { createApp, createVNode, render } = Vue;
const app = createApp({})

const timeArr = new Array(24).fill('');
const totals = [];
timeArr.forEach((i, index) => { const t = window.dayjs().hour(index).valueOf(); totals.push({ val: Math.random(1000) * 100, ts: t, attrKey: "A29" }) });
const defaultSocketValue = []

const VideoNode = {
    template: \`<div style="width: 100%; height: 100%;" draggable="false">
        <video v-if="linkAddress" controls="" autoplay="" loop="" preload="auto" crossorigin="anonymous" playsinline="" :style="getStyle" :width="width" :height="height">
            <source :src="linkAddress">
        </video>
        <div v-if="!linkAddress" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border: 1px solid #00ffff; box-sizing: border-box;color: #F5A623">暂无内容</div>
    </div>
    \`,
    props: {
        chartId: {
            type: String,
            default: ''
        },
        width: {
            type: Number,
            default: 350
        },
        height: {
            type: Number,
            default: 150
        },
        codeConfig: {
            type: String,
            default: ''
        },
        linkAddress: {
            type: String,
            default: ''
        },
        fitStyle: {
            type: String,
            default: ''
        }
    },
    computed: {
        getStyle() {
            const fit = this.fitStyle;
            return \`display: block; object-fit: \${fit};\`
        }
    }
}

class CustomVideoNode extends HtmlResize.view {

    setHtml(rootEl) {
        if (!rootEl) return;
        const { properties, width, height, } = this.props.model;
        const { nodeAlias,codeConfig, linkAddress, fitStyle } = properties;

        const el = document.createElement('div');
        el.style.width = "100%";
        el.style.height = "100%";
        rootEl.innerHTML = '';
        const instance = createVNode(VideoNode, {
            name: nodeAlias,
            chartId: \`horibar-\${properties.id}\`,
            width,
            height,
            codeConfig,
            linkAddress,
            fitStyle,
        })
        instance.appContext = app._context
        render(instance, el)
        rootEl.appendChild(el);
    }
}

class CustomVideoModel 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: "",
        }
    }

    getResizeOutlineStyle() {
        return {
        stroke: "#00ffff",
        strokeWidth: 1,
        strokeDasharray: "none",
        };
    }
}

lf.register({
    type: 'custom-video-node',
    view: CustomVideoNode,
    model: CustomVideoModel,
})`,css:"",fakeData:""},p={id:e,name:t,aliasName:a,image:n,imageType:i,groupName:l,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:d,files:c};export{a as aliasName,d as config,p as default,c as files,l as groupName,o as groupType,e as id,n as image,i as imageType,u as isDefault,r as isRemote,t as name,s as sectionType};