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

const e="7e8fef9d-423e-42fc-87af-d6735bd8cca0",t="horizontal-elliptical-tank",a="水平2比1椭圆水箱",n=`<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 175.5C18.5 175.5 1.5 156.5 1.5 111.5C1.5 66.5 19.5 47.5 27.4999 47.5H205.5C213.5 47.5 231.5 66.5 231.5 111.5C231.5 156.5 214.5 175.5 205.5 175.5H27.5Z" fill="#6216FF" fill-opacity="0"/>
  <path class="tb-shape-fill" d="M0.5 111.5C0.5 134.119 4.77161 150.285 10.2371 160.835C12.969 166.108 16.01 169.998 18.9848 172.583C21.9415 175.152 24.9166 176.5 27.5 176.5V174.5C25.5834 174.5 23.0585 173.473 20.2965 171.073C17.5525 168.689 14.656 165.017 12.0129 159.915C6.72839 149.715 2.5 133.881 2.5 111.5H0.5ZM27.4999 46.5C25.1452 46.5 22.2907 47.8693 19.4004 50.4224C16.4803 53.0019 13.4107 56.8857 10.6165 62.1566C5.02539 72.7034 0.5 88.871 0.5 111.5H2.5C2.5 89.129 6.97461 73.2966 12.3835 63.0934C15.0893 57.9893 18.0197 54.3106 20.7245 51.9213C23.4592 49.5057 25.8546 48.5 27.4999 48.5V46.5ZM205.5 46.5H27.4999V48.5H205.5V46.5ZM232.5 111.5C232.5 88.871 227.975 72.7034 222.384 62.1566C219.589 56.8857 216.52 53.0019 213.6 50.4224C210.709 47.8693 207.855 46.5 205.5 46.5V48.5C207.145 48.5 209.541 49.5057 212.275 51.9213C214.98 54.3106 217.911 57.9893 220.616 63.0934C226.025 73.2966 230.5 89.129 230.5 111.5H232.5ZM205.5 176.5C208.083 176.5 211.058 175.152 214.015 172.583C216.99 169.998 220.031 166.108 222.763 160.835C228.228 150.285 232.5 134.119 232.5 111.5H230.5C230.5 133.881 226.272 149.715 220.987 159.915C218.344 165.017 215.447 168.689 212.704 171.073C209.942 173.473 207.417 174.5 205.5 174.5V176.5ZM27.5 176.5H205.5V174.5H27.5V176.5Z" fill="#242770"/>
  <mask id="mask0_3572_11071" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="50" width="225" height="123">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 172.5C21.5 172.5 4.5 154.391 4.5 111.5C4.5 68.6094 21.5 50.5 27.4999 50.5H205.5C211.5 50.5 228.5 68.6094 228.5 111.5C228.5 154.391 211.5 172.5 205.5 172.5H27.5Z" fill="#F1F1F9"/>
  </mask>
  <g mask="url(#mask0_3572_11071)">
    <rect class="tb-liquid-fill tb-liquid" x="4.5" y="118.5" width="224" height="122" fill="#7A8BFF"/>
    <rect class="tb-liquid-surface tb-liquid" x="4.5" y="118.5" width="224" height="1" fill="#7A8BFF"/>
    <rect class="tb-liquid-surface" x="4.5" y="118.5" width="224" height="1" fill="white" fill-opacity="0.1"/>
  </g>
  <path class="tb-shape-stroke" d="M48.5 47.5C41.7084 69.7745 32.2001 126.559 48.5 175.5" stroke="#242770" stroke-width="2"/>
  <path class="tb-shape-stroke" d="M184.5 47.5C177.708 69.7745 168.2 126.559 184.5 175.5" stroke="#242770" stroke-width="2"/>
  <mask id="path-8-inside-1_3572_11071" fill="white">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 30.5H102.5V48.5C102.5 50.1569 108.992 51.5 117 51.5C125.008 51.5 131.5 50.1569 131.5 48.5V30.5Z"/>
  </mask>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 30.5H102.5V48.5C102.5 50.1569 108.992 51.5 117 51.5C125.008 51.5 131.5 50.1569 131.5 48.5V30.5Z"/>
  <path class="tb-shape-fill" d="M102.5 30.5V28.5H100.5V30.5H102.5ZM131.5 30.5H133.5V28.5H131.5V30.5ZM102.5 32.5H131.5V28.5H102.5V32.5ZM104.5 48.5V30.5H100.5V48.5H104.5ZM117 49.5C113.09 49.5 109.607 49.1707 107.152 48.6628C105.908 48.4055 105.034 48.1232 104.518 47.8712C104.257 47.7431 104.191 47.6721 104.217 47.6982C104.248 47.7304 104.5 48.0048 104.5 48.5H100.5C100.5 49.4095 100.954 50.0882 101.373 50.511C101.785 50.9277 102.289 51.2334 102.761 51.4643C103.713 51.9301 104.962 52.2943 106.342 52.5798C109.135 53.1577 112.902 53.5 117 53.5V49.5ZM129.5 48.5C129.5 48.0048 129.752 47.7304 129.783 47.6982C129.809 47.6721 129.743 47.7431 129.482 47.8712C128.966 48.1232 128.092 48.4055 126.848 48.6628C124.393 49.1707 120.91 49.5 117 49.5V53.5C121.098 53.5 124.865 53.1577 127.658 52.5798C129.038 52.2943 130.287 51.9301 131.239 51.4643C131.711 51.2334 132.215 50.9277 132.627 50.511C133.046 50.0882 133.5 49.4095 133.5 48.5H129.5ZM129.5 30.5V48.5H133.5V30.5H129.5Z" fill="#242770" mask="url(#path-8-inside-1_3572_11071)"/>
  <path class="tb-shape-stroke" d="M117 33.5C121.236 33.5 125.045 33.167 127.77 32.6395C129.141 32.3742 130.187 32.0692 130.866 31.7584C131.077 31.662 131.231 31.5742 131.341 31.5C131.231 31.4258 131.077 31.338 130.866 31.2416C130.187 30.9308 129.141 30.6258 127.77 30.3605C125.045 29.833 121.236 29.5 117 29.5C112.764 29.5 108.955 29.833 106.23 30.3605C104.859 30.6258 103.813 30.9308 103.134 31.2416C102.923 31.338 102.769 31.4258 102.659 31.5C102.769 31.5742 102.923 31.662 103.134 31.7584C103.813 32.0692 104.859 32.3742 106.23 32.6395C108.955 33.167 112.764 33.5 117 33.5Z" stroke="#242770" stroke-width="2"/>
  <path class="tb-shape-stroke" d="M117 30.5C121.236 30.5 125.045 30.167 127.77 29.6395C129.141 29.3742 130.187 29.0692 130.866 28.7584C131.077 28.662 131.231 28.5742 131.341 28.5C131.231 28.4258 131.077 28.338 130.866 28.2416C130.187 27.9308 129.141 27.6258 127.77 27.3605C125.045 26.833 121.236 26.5 117 26.5C112.764 26.5 108.955 26.833 106.23 27.3605C104.859 27.6258 103.813 27.9308 103.134 28.2416C102.923 28.338 102.769 28.4258 102.659 28.5C102.769 28.5742 102.923 28.662 103.134 28.7584C103.813 29.0692 104.859 29.3742 106.23 29.6395C108.955 30.167 112.764 30.5 117 30.5Z" stroke="#242770" stroke-width="2"/>
</svg>
`,l="svg",i="大屏",o="水位",u=!1,c=!0,s="时间",r=`{"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":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:9672575193ac","md":6}]},{"type":"grid","id":"u:a332a7bf83c1","className":"m-b","columns":[{"body":[{"type":"input-number","label":"旋转","name":"rotation","id":"u:f6a2dbb518f9","placeholder":"组件旋转角度","mode":"horizontal","size":"full","className":"","keyboard":true,"step":1,"suffix":"deg","value":0,"labelAlign":"left","inputClassName":"w-full"}],"id":"u:646cd98b7955","md":6},{"body":[{"type":"input-number","label":"透明","name":"opacity","id":"u:cf80f59d8d42","placeholder":"组件透明度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":0,"suffix":"","value":1,"inputClassName":"w-full","precision":2}],"id":"u:51ddf54ac749","md":6}],"gap":""},{"type":"grid","columns":[],"id":"u:235f153e5ad5","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"描边颜色","name":"strokeColor","id":"u:7783b65d58a9","mode":"horizontal","format":"rgba","inputClassName":"w-full"},{"type":"input-color","label":"液体颜色","name":"liquidColor","id":"u:76fa4643d6bd","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"显示值","option":"","name":"showValue","falseValue":false,"trueValue":true,"id":"u:b52d7cc4b201","value":false,"mode":"horizontal","className":"m-b"}],"id":"u:83905272eb76"}],"id":"u:19e1ffafeb70","className":"m-b"},{"type":"select","id":"u:678a2c313b7f","label":"值类型","name":"valueType","options":[{"label":"百分比","value":"ratio"},{"label":"常规值","value":"normal"}],"multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"grid","id":"u:94b0e20f05da","columns":[{"body":[{"type":"input-color","label":"值颜色","name":"valueColor","id":"u:9b5b55cac08a","format":"rgba","mode":"horizontal","value":"rgba(245, 166, 35, 1)","className":"m-b","inputClassName":"w-full"},{"type":"input-number","label":"值字体大小","name":"valueFontSize","keyboard":true,"id":"u:06950e120b0a","st
  "nodes": [
    {
      "id": "e248c735-6256-422f-836a-61c59d332b7a",
      "type": "horizontal-elliptical-tank",
      "x": 200,
      "y": 200,
      "text": {
        "value": "",
        "x": 200,
        "y": 200
      },
      "properties": {
        "id": "e248c735-6256-422f-836a-61c59d332b7a",
        "width": 200,
        "height": 200,
        "x": 200,
        "y": 200,
        "rotation": 0,
        "opacity": 1,
        "showValue": true,
        "valueColor": "rgba(74, 144, 226, 1)",
        "warnColor": "rgba(245, 166, 35, 1)",
        "seriousColor": "rgba(208, 2, 27, 1)",
        "showUnit": true,
        "unitColor": "rgba(74, 144, 226, 1)",
        "nodeAlias": "水平2比1椭圆水箱",
        "showDefaultValue": false,
        "fontSize": 12,
        "strokeColor": "#242770",
        "liquidColor": "#7A8BFF",
        "valueType": "ratio",
        "valueFontSize": 16,
        "maxValue": 100,
        "warnValue": 75,
        "seriousValue": 90,
        "unitFontSize": 12,
        "dynamic": {
          "normalData": {
            "dataPoint": "",
            "compareType": "",
            "conditionVariables": [],
            "defaultValue": "",
            "unit": ""
          }
        }
      }
    }
  ]
}`,javascript:`const { createApp, createVNode, render } = Vue;
const app = createApp({})

const defaultVal = 62;

const HorizontalEllipticalTank = {
    template: \`<div>
        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 233 201" fill="none"
  xmlns="http://www.w3.org/2000/svg" style="stroke: none;">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 175.5C18.5 175.5 1.5 156.5 1.5 111.5C1.5 66.5 19.5 47.5 27.4999 47.5H205.5C213.5 47.5 231.5 66.5 231.5 111.5C231.5 156.5 214.5 175.5 205.5 175.5H27.5Z" fill="#6216FF" fill-opacity="0"/>
  <path class="tb-shape-fill" d="M0.5 111.5C0.5 134.119 4.77161 150.285 10.2371 160.835C12.969 166.108 16.01 169.998 18.9848 172.583C21.9415 175.152 24.9166 176.5 27.5 176.5V174.5C25.5834 174.5 23.0585 173.473 20.2965 171.073C17.5525 168.689 14.656 165.017 12.0129 159.915C6.72839 149.715 2.5 133.881 2.5 111.5H0.5ZM27.4999 46.5C25.1452 46.5 22.2907 47.8693 19.4004 50.4224C16.4803 53.0019 13.4107 56.8857 10.6165 62.1566C5.02539 72.7034 0.5 88.871 0.5 111.5H2.5C2.5 89.129 6.97461 73.2966 12.3835 63.0934C15.0893 57.9893 18.0197 54.3106 20.7245 51.9213C23.4592 49.5057 25.8546 48.5 27.4999 48.5V46.5ZM205.5 46.5H27.4999V48.5H205.5V46.5ZM232.5 111.5C232.5 88.871 227.975 72.7034 222.384 62.1566C219.589 56.8857 216.52 53.0019 213.6 50.4224C210.709 47.8693 207.855 46.5 205.5 46.5V48.5C207.145 48.5 209.541 49.5057 212.275 51.9213C214.98 54.3106 217.911 57.9893 220.616 63.0934C226.025 73.2966 230.5 89.129 230.5 111.5H232.5ZM205.5 176.5C208.083 176.5 211.058 175.152 214.015 172.583C216.99 169.998 220.031 166.108 222.763 160.835C228.228 150.285 232.5 134.119 232.5 111.5H230.5C230.5 133.881 226.272 149.715 220.987 159.915C218.344 165.017 215.447 168.689 212.704 171.073C209.942 173.473 207.417 174.5 205.5 174.5V176.5ZM27.5 176.5H205.5V174.5H27.5V176.5Z" :fill="finalStrokeColor"/>
  <mask id="mask0_3572_11071" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="50" width="225" height="123">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 172.5C21.5 172.5 4.5 154.391 4.5 111.5C4.5 68.6094 21.5 50.5 27.4999 50.5H205.5C211.5 50.5 228.5 68.6094 228.5 111.5C228.5 154.391 211.5 172.5 205.5 172.5H27.5Z" fill="#F1F1F9"/>
  </mask>
  <g mask="url(#mask0_3572_11071)">
    <g clip-path="url(#clip0_3572_11071)" :id="chartId" style="transform: translateY(42%); transition: all 0.35s ease-in-out;" >
        <rect class="tb-liquid-fill tb-liquid" x="4.5" y="118.5" width="224" height="122" :fill="finalLiquidColor"/>
        <rect class="tb-liquid-surface tb-liquid" x="4.5" y="118.5" width="224" height="1" :fill="finalLiquidColor"/>
        <rect class="tb-liquid-surface" x="4.5" y="118.5" width="224" height="1" fill="white" fill-opacity="0.1"/>
    </g>
  </g>
  <path class="tb-shape-stroke" d="M48.5 47.5C41.7084 69.7745 32.2001 126.559 48.5 175.5" :stroke="finalStrokeColor" stroke-width="2"/>
  <path class="tb-shape-stroke" d="M184.5 47.5C177.708 69.7745 168.2 126.559 184.5 175.5" :stroke="finalStrokeColor" stroke-width="2"/>
  <mask id="path-8-inside-1_3572_11071" fill="white">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 30.5H102.5V48.5C102.5 50.1569 108.992 51.5 117 51.5C125.008 51.5 131.5 50.1569 131.5 48.5V30.5Z"/>
  </mask>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M131.5 30.5H102.5V48.5C102.5 50.1569 108.992 51.5 117 51.5C125.008 51.5 131.5 50.1569 131.5 48.5V30.5Z"/>
  <path class="tb-shape-fill" d="M102.5 30.5V28.5H100.5V30.5H102.5ZM131.5 30.5H133.5V28.5H131.5V30.5ZM102.5 32.5H131.5V28.5H102.5V32.5ZM104.5 48.5V30.5H100.5V48.5H104.5ZM117 49.5C113.09 49.5 109.607 49.1707 107.152 48.6628C105.908 48.4055 105.034 48.1232 104.518 47.8712C104.257 47.7431 104.191 47.6721 104.217 47.6982C104.248 47.7304 104.5 48.0048 104.5 48.5H100.5C100.5 49.4095 100.954 50.0882 101.373 50.511C101.785 50.9277 102.289 51.2334 102.761 51.4643C103.713 51.9301 104.962 52.2943 106.342 52.5798C109.135 53.1577 112.902 53.5 117 53.5V49.5ZM129.5 48.5C129.5 48.0048 129.752 47.7304 129.783 47.6982C129.809 47.6721 129.743 47.7431 129.482 47.8712C128.966 48.1232 128.092 48.4055 126.848 48.6628C124.393 49.1707 120.91 49.5 117 49.5V53.5C121.098 53.5 124.865 53.1577 127.658 52.5798C129.038 52.2943 130.287 51.9301 131.239 51.4643C131.711 51.2334 132.215 50.9277 132.627 50.511C133.046 50.0882 133.5 49.4095 133.5 48.5H129.5ZM129.5 30.5V48.5H133.5V30.5H129.5Z" :fill="finalStrokeColor" mask="url(#path-8-inside-1_3572_11071)"/>
  <path class="tb-shape-stroke" d="M117 33.5C121.236 33.5 125.045 33.167 127.77 32.6395C129.141 32.3742 130.187 32.0692 130.866 31.7584C131.077 31.662 131.231 31.5742 131.341 31.5C131.231 31.4258 131.077 31.338 130.866 31.2416C130.187 30.9308 129.141 30.6258 127.77 30.3605C125.045 29.833 121.236 29.5 117 29.5C112.764 29.5 108.955 29.833 106.23 30.3605C104.859 30.6258 103.813 30.9308 103.134 31.2416C102.923 31.338 102.769 31.4258 102.659 31.5C102.769 31.5742 102.923 31.662 103.134 31.7584C103.813 32.0692 104.859 32.3742 106.23 32.6395C108.955 33.167 112.764 33.5 117 33.5Z" :stroke="finalStrokeColor" stroke-width="2"/>
  <path class="tb-shape-stroke" d="M117 30.5C121.236 30.5 125.045 30.167 127.77 29.6395C129.141 29.3742 130.187 29.0692 130.866 28.7584C131.077 28.662 131.231 28.5742 131.341 28.5C131.231 28.4258 131.077 28.338 130.866 28.2416C130.187 27.9308 129.141 27.6258 127.77 27.3605C125.045 26.833 121.236 26.5 117 26.5C112.764 26.5 108.955 26.833 106.23 27.3605C104.859 27.6258 103.813 27.9308 103.134 28.2416C102.923 28.338 102.769 28.4258 102.659 28.5C102.769 28.5742 102.923 28.662 103.134 28.7584C103.813 29.0692 104.859 29.3742 106.23 29.6395C108.955 30.167 112.764 30.5 117 30.5Z" :stroke="finalStrokeColor" stroke-width="2"/>
</svg>
    <div :style="getTitleStyle">
        <div>
            <span :style="valueStyle">{{valueStr}}</span><span :style="unitStyle">{{unitStr}}</span>
        </div>
    </div>
    </div>
\`,
    props: {
        chartId: {
            type: String,
            default: ''
        },
        currentData: {
            type: Number,
            default: 100
        },
        width: {
            type: Number,
            default: 350
        },
        height: {
            type: Number,
            default: 150
        },
        chartProps: {
            type: Object,
            default: () => { }
        },
        thingName: {
            type: String,
            default: ''
        },
        attr: {
            type: String,
            default: ''
        },
        unit: {
            type: String,
            default: ''
        },
    },
    computed: {
        getTitleStyle() {
            return {
                position: 'absolute',
                top: '0px',
                bottom: \`0px\`,
                width: '100%',
                zIndex: 100,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center'
            }
        }
    },
    setup(props) {
        const { computed, ref, watch, toRefs, nextTick } = Vue;
        const { chartProps, currentData, thingName, attr, width, height } = toRefs(props);

        let valueStr = ref('');
        let unitStr = ref('');
        let finalLiquidColor = ref('#7A8BFF');
        let finalStrokeColor = ref("#242770");

        const updateChart = (realValue, properties) => {
            const { warnValue, seriousValue, maxValue, warnColor, seriousColor, showValue, valueType, showUnit, unit, liquidColor, strokeColor } = properties;
            const ratio = (realValue / maxValue * 100).toFixed(2);
            if (showValue) {
                if (valueType === 'ratio') {
                    valueStr.value = ratio + ''
                    showUnit && (unitStr.value = '%')
                } else {
                    valueStr.value = realValue + ''
                    showUnit && (unitStr.value = unit)
                }
            }
            finalLiquidColor.value = liquidColor;
            finalStrokeColor.value = strokeColor;
            if (seriousValue && realValue >= seriousValue) {
                finalLiquidColor.value = seriousColor
            } else if (warnValue && realValue >= warnValue) {
                finalLiquidColor.value = warnColor
            }
            setTimeout(() => {
                const tankNode = document.getElementById(props.chartId);
                const liquidLevel = Math.round(27 - (realValue / maxValue * 61));
                tankNode.style.transform = \`translateY(\${liquidLevel}%)\`;
            }, 50)
        }

        watch([currentData, chartProps], ([val, properties]) => {
            nextTick(() => {
                updateChart(val, properties)
            })
        }, {
            immediate: true,
            deep: true,
        })

        const valueStyle = computed(() => {
            return {
                color: chartProps.value.valueColor,
                fontSize: chartProps.value.valueFontSize + 'px'
            }
        })

        const unitStyle = computed(() => {
            return {
                color: chartProps.value.unitColor,
                fontSize: chartProps.value.unitFontSize + 'px',
                marginLeft: '3px'
            }
        })

        return {
            valueStyle,
            unitStyle,
            valueStr,
            unitStr,
            finalLiquidColor,
            finalStrokeColor,
        }
    }
}

class HorizontalEllipticalTankNode extends HtmlResize.view {
    realValue = defaultVal
    oldProperties = {}
    chartRendered = false
    instance = null

    setHtml(rootEl) {
        if (!rootEl) return;
        const { properties, width, height } = this.props.model;
        const { normalData } = properties.dynamic || {}
        let thingName = 'pressure';
        let attr = 'score';
        if (normalData && normalData.dataPoint) {
            const dataPointStrParsed = JSON.parse(normalData.dataPoint || '{}')
            const { deviceCode, dataPoint } = dataPointStrParsed;
            thingName = deviceCode;
            attr = dataPoint.split(',')[0];
        }
        if (this.instance) {
            // 实时数据不能推送一次就创建一次图表，可以在原有实例基础之上更改数据。
            Object.assign(this.instance.component.props, {
                name: properties.nodeAlias,
                chartId: \`liquidlevel-\${properties.id}\`,
                currentData: this.realValue,
                width,
                height,
                chartProps: properties,
                thingName,
                attr,
            })
            return
        }
        const el = document.createElement('div');
        rootEl.innerHTML = '';
        const instance = createVNode(HorizontalEllipticalTank, {
            name: properties.nodeAlias,
            chartId: \`liquidLevel-\${properties.id}\`,
            currentData: this.realValue,
            width,
            height,
            chartProps: properties,
            thingName,
            attr,
        })
        instance.appContext = app._context
        render(instance, el)
        rootEl.appendChild(el);
        this.instance = instance;
    }

    sameProps(properties) {
        const isSame = window._.isEqual(this.oldProperties, properties);
        if (isSame) return true;
        this.oldProperties = properties;
        return false
    }

    // 生命周期 支持重写内容, 但格式需一致
    shouldUpdate() {
        const { properties } = this.props.model;
        const { normalData } = properties.dynamic || {};

        if (normalData && !normalData.dataPoint && !normalData.defaultValue) {
            this.realValue = defaultVal;
            return true
        }

        if (normalData) {
            const { defaultValue } = normalData || {};
            if (defaultValue) {
                const realValue = window.resolveScadaNewValue(defaultValue)
                if (this.realValue !== Number(realValue)) {
                    this.realValue = Number(realValue);
                    return true;
                }
            }
        }

        const propertiesBack = window._.cloneDeep(properties);
        if (propertiesBack.dynamic.normalData) {
            const isSameProps = this.sameProps(propertiesBack);
            if (isSameProps && this.chartRendered) {
                return false
            } else {
                if (!this.chartRendered) {
                    this.chartRendered = true
                    return true
                }
                if (!isSameProps) {
                    return true;
                }
            }
        }
    }

    updateHtml() {
        this.setHtml(this.rootEl);
    }

    componentDidMount() {
        // 防止拖动时候频繁渲染图表
        this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500);
        if (this.shouldUpdate()) {
            this.setHtml(this.rootEl);
        }
    }

    componentDidUpdate() {
        if (this.shouldUpdate()) {
            this.updateHtmlDebounced();
        }
    }
}

class HorizontalEllipticalTankModel 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: 'horizontal-elliptical-tank',
    view: HorizontalEllipticalTankNode,
    model: HorizontalEllipticalTankModel,
})

`,css:"",fakeData:""},p={id:e,name:t,aliasName:a,image:n,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:r,files:d};export{a as aliasName,r as config,p as default,d as files,i as groupName,o as groupType,e as id,n as image,l as imageType,c as isDefault,u as isRemote,t as name,s as sectionType};