You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
715 lines
71 KiB
715 lines
71 KiB
const e="be616a00-e2bc-4849-8b28-8cdd35cd190b",a="custom-line-chart",t="折线图",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="1694569114379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1510" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M240.8 803.68l-26.933333-25.813333 248.053333-258.613334 158.186667 158.186667 232-232 26.4 26.4-258.4 258.4-157.653334-157.653333-221.653333 231.093333z" fill="#23B8BA" p-id="1511"></path><path d="M852.106667 456.746667l15.093333 15.093333-247.093333 247.093333-152-152-5.76-5.76-5.653334 5.866667-216.16 225.333333-15.36-14.773333 236.853334-246.933333 152.426666 152.426666 5.653334 5.653334 5.653333-5.653334 226.346667-226.346666m0-11.306667L620.106667 677.333333 461.866667 519.253333l-248 258.613334 26.666666 25.813333 221.653334-231.093333 157.653333 157.653333 258.4-258.4-26.4-26.666667z" fill="#14A59E" p-id="1512"></path><path d="M240.8 537.44l-26.933333-25.866667 248.053333-258.613333 158.186667 158.186667 232-232 26.4 26.4-258.4 258.4-157.653334-157.6-221.653333 231.093333z" fill="#FFA800" p-id="1513"></path><path d="M852.106667 190.453333l15.093333 15.093334-247.093333 247.093333-152-151.946667-5.76-5.813333-5.653334 5.92L240.533333 526.08l-15.36-14.72 236.853334-246.933333 152.426666 152.373333 5.653334 5.653333 5.653333-5.653333 226.346667-226.346667m0-11.306666l-232 232L461.866667 252.96 213.866667 511.573333l26.666666 25.866667 221.92-231.093333L620.106667 464l258.4-258.4-26.4-26.4z" fill="#E29103" p-id="1514"></path><path d="M144 880V106.666667h-37.333333v810.666666h810.666666v-37.333333H144z" fill="#0985F6" p-id="1515"></path><path d="M136 114.666667v773.333333h773.333333v21.333333h-794.666666v-794.666666h21.333333M144 106.666667h-37.333333v810.666666h810.666666v-37.333333H144V106.666667z" fill="#006FC1" p-id="1516"></path><path d="M462.293333 294.56m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#FFA800" p-id="1517"></path><path d="M462.293333 254.56a40 40 0 1 1-40 40 40 40 0 0 1 40-40m0-8a48 48 0 1 0 48 48 48 48 0 0 0-48-48z" fill="#E29103" p-id="1518"></path><path d="M227.306667 524.48m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#FFA800" p-id="1519"></path><path d="M227.306667 484.48a40 40 0 1 1-40 40 40.053333 40.053333 0 0 1 40-40m0-8a48 48 0 1 0 48 48 48 48 0 0 0-48-48z" fill="#E29103" p-id="1520"></path><path d="M619.253333 432.426667m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#FFA800" p-id="1521"></path><path d="M619.253333 392.426667a40 40 0 1 1-40 40 40 40 0 0 1 40-40m0-8a48 48 0 1 0 48 48 48 48 0 0 0-48-48z" fill="#E29103" p-id="1522"></path><path d="M861.333333 192.8m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#FFA800" p-id="1523"></path><path d="M861.333333 152.8a40 40 0 1 1-40 40 40 40 0 0 1 40-40m0-8a48 48 0 1 0 48 48 48 48 0 0 0-48-48z" fill="#E29103" p-id="1524"></path><path d="M462.293333 560.8m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#23B8BA" p-id="1525"></path><path d="M462.293333 520.8a40 40 0 1 1-40 40 40.053333 40.053333 0 0 1 40-40m0-8a48 48 0 1 0 48 48 48 48 0 0 0-48-48z" fill="#14A59E" p-id="1526"></path><path d="M227.306667 790.773333m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#23B8BA" p-id="1527"></path><path d="M227.306667 750.773333a40 40 0 1 1-40 40 40 40 0 0 1 40-40m0-8a48 48 0 1 0 48 48 48 48 0 0 0-48-48z" fill="#14A59E" p-id="1528"></path><path d="M619.253333 698.666667m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#23B8BA" p-id="1529"></path><path d="M619.253333 658.666667a40 40 0 1 1-40 40 40.053333 40.053333 0 0 1 40-40m0-8a48 48 0 1 0 48 48 48 48 0 0 0-48-48z" fill="#14A59E" p-id="1530"></path><path d="M861.333333 457.6m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#23B8BA" p-id="1531"></path><path d="M861.333333 417.6a40 40 0 1 1-40 40 40 40 0 0 1 40-40m0-8a48 48 0 1 0 48 48 48 48 0 0 0-48-48z" fill="#14A59E" p-id="1532"></path></svg>',i="svg",l="动态",o="图表组件",u=!1,p=!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 ","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":"radios","label":"渲染模式","name":"renderMode","options":[{"label":"canvas","value":"canvas"},{"label":"svg","value":"svg"}],"id":"u:047a1336613a","mode":"horizontal"},{"type":"grid","columns":[],"id":"u:235f153e5ad5","className":"m-b"},{"type":"fieldset","id":"u:2a93d8eee7a9","className":"","title":"布局","collapsable":true,"body":[{"type":"container","id":"u:1606d0ad8360","body":[{"type":"grid","columns":[{"body":[{"type":"input-text","label":"左边距","name":"grid.left","id":"u:1778e7d54c41","mode":"horizontal","size":"full"}],"id":"u:720608fd274b"},{"body":[{"type":"input-text","label":"右边距","name":"grid.right","id":"u:41e8804639dd","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:175b96654696","mode":"horizontal","size":"full"}]}],"id":"u:fb776ace0e8b"}],"id":"u:aea0c21b7ba2","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-text","label":"上边距","name":"grid.top","id":"u:8f1e65861eca","mode":"horizontal","size":"full"}],"id":"u:97a259e6edde"},{"body":[{"type":"input-text","label":"下边距","name":"grid.bottom","id":"u:1774c755f248","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:e1d3e5e47502","mode":"horizontal","size":"full"}]}],"id":"u:4699288ff76c"}],"id":"u:a580952c96bd","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"背景","name":"grid.backgroundColor","id":"u:f398c821eda1","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"背景","inputClassName":"w-full"}],"id":"u:e14008b58dcb"},{"body":[{"type":"switch","label":"显示","option":"","name":"grid.show","falseValue":false,"trueValue":true,"id":"u:97eb082723ff","value":false,"mode":"horizontal"}],"id":"u:a013d4bd2004"}],"id":"u:94acb2282c6c","className":"m-b"}],"style":{"position":"static","display":"block"},"data":{"grid":{}},"wrapperBody":false}],"bodyClassName":"m-b"},{"type":"fieldset","id":"u:0685657fe4bc","className":"","title":"标题","collapsable":true,"body":[{"type":"container","id":"u:73fcc93013bb","body":[{"type":"grid","columns":[{"body":[{"type":"input-text","label":"文本","name":"title.text","id":"u:367bcfaf236d","mode":"horizontal"}],"id":"u:bcea4c8a21d2"},{"body":[{"type":"switch","label":"显示","option":"","name":"title.show","falseValue":false,"trueValue":true,"id":"u:67b9b8292560","value":false,"mode":"horizontal"}],"id":"u:2e8f807025d3"}],"id":"u:5fafefdb95b3","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-text","label":"左边距","name":"title.left","id":"u:c0774249b76c","mode":"horizontal","size":"full"}],"id":"u:ce7604a06386"},{"body":[{"type":"input-text","label":"右边距","name":"title.right","id":"u:ba7437e94ec2","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:115359876c6b","mode":"horizontal","size":"full"}]}],"id":"u:0b1a46c451fb"}],"id":"u:d5f5d7d1f821","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-text","label":"上边距","name":"title.top","id":"u:26039411388d","mode":"horizontal","size":"full"}],"id":"u:f02a179a6a50"},{"body":[{"type":"input-text","label":"下边距","name":"title.bottom","id":"u:54a0ef638b7d","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:65d1107ed8b8","mode":"horizontal","size":"full"}]}],"id":"u:1989abb0a053"}],"id":"u:aa3c4bbe6aa5","className":"m-b"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"data":{"title":{}}},{"type":"fieldset","id":"u:4a7ac0579e1c","title":"字体","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"title.textStyle.color","id":"u:570bce4701ea","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:3b84bfb2ac84"},{"body":[{"type":"input-number","label":"大小","name":"title.textStyle.fontSize","keyboard":true,"id":"u:e4036200c979","step":1,"mode":"horizontal"}],"id":"u:fa52ed3d81ae"}],"id":"u:47c4b60e2f0a"}],"id":"u:26e7e01f73a1"}],"id":"u:1f93884d7cab"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:94fc9c2c1ee3","data":{"textStyle":{}}}],"bodyClassName":""}],"bodyClassName":"m-b","headingClassName":""},{"type":"fieldset","id":"u:a0a8c50d2f9c","className":"","title":"图例","collapsable":true,"body":[{"type":"container","id":"u:5af0a6740a48","body":[{"type":"grid","columns":[{"body":[{"type":"input-text","label":"左边距","name":"legend.left","id":"u:0228dee14f3e","mode":"horizontal","size":"full","placeholder":"","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"输入：auto, 20, 20%, 或， 'left', 'center', 'right'"}}],"id":"u:ffb4d6853cbb"},{"body":[{"type":"input-text","label":"右边距","name":"legend.right","id":"u:99d884571158","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:9048b9fc654f","mode":"horizontal","size":"full"}],"placeholder":"","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"输入：auto, 20, 20%"}}],"id":"u:5b434cc50594"}],"id":"u:254dccfe46f5","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-text","label":"上边距","name":"legend.top","id":"u:3efa5a6f1d46","mode":"horizontal","size":"full","placeholder":"","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"输入：auto, 20, 20%, 或， 'top', 'middle', 'bottom'"}}],"id":"u:79668537c91d"},{"body":[{"type":"input-text","label":"下边距","name":"legend.bottom","id":"u:6030173b41b3","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:c035f176036c","mode":"horizontal","size":"full"}],"placeholder":"","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"输入：auto, 20, 20%"}}],"id":"u:e9f3fe39e864"}],"id":"u:211aaa4653cc","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"select","label":"布局","name":"legend.orient","options":[{"label":"横向布局","value":"horizontal"},{"label":"纵向布局","value":"'vertical'"}],"id":"u:a18ac2f33143","multiple":false,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:5e71ee86aec4"},{"body":[{"type":"switch","label":"显示图例","option":"","name":"legend.show","falseValue":false,"trueValue":true,"id":"u:25bc165dc563","value":false,"mode":"horizontal"}],"id":"u:90592ff9b2a3"}],"id":"u:49360f5a1bcb","className":"m-b"},{"type":"fieldset","id":"u:272913f05159","title":"字体","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"legend.textStyle.color","id":"u:ddd5a5134e19","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:b2df858e74f3"},{"body":[{"type":"input-number","label":"大小","name":"legend.textStyle.fontSize","keyboard":true,"id":"u:eec3185223ca","step":1,"mode":"horizontal"}],"id":"u:865c3447f663"}],"id":"u:5de46ec9b165"}],"id":"u:dfbc505ddf7a"}],"id":"u:36dd156f03e5"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:265de21133fd","data":{"textStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"data":{"legend":{}},"wrapperBody":false}],"bodyClassName":"","headingClassName":""},{"type":"fieldset","id":"u:2321d062ada5","className":"","title":"提示框","collapsable":true,"body":[{"type":"container","id":"u:3661446fb8ad","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"tooltip.show","falseValue":false,"trueValue":true,"id":"u:8df1faada29d","value":false,"mode":"horizontal","className":"m-b"}],"id":"u:8a7218821e27"},{"body":[{"type":"input-color","label":"背景","name":"tooltip.backgroundColor","id":"u:b3a6408a8dae","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full"}],"id":"u:7b83edc11d08"}],"id":"u:eda33b0d0f98","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"select","label":"触发","name":"tooltip.trigger","options":[{"label":"数据项触发","value":"item"},{"label":"坐标轴触发","value":"axis"}],"id":"u:fd2fa797125e","multiple":false,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:da210f3ca364"},{"body":[{"type":"switch","label":"显示内容","option":"","name":"tooltip.showContent","falseValue":false,"trueValue":true,"id":"u:902a4a22cdfc","value":false,"mode":"horizontal"}],"id":"u:824cae55e184"}],"id":"u:2730c1b6116e","className":"m-b"},{"type":"grid","id":"u:5300fcaff465","columns":[{"body":[{"type":"input-color","label":"边色","name":"tooltip.borderColor","id":"u:c2f4d40b92ed","format":"rgba","mode":"horizontal","inputClassName":"w-full myColorPick"}],"id":"u:a25f8b35520a"},{"body":[{"type":"input-number","label":"边宽","name":"tooltip.borderWidth","keyboard":true,"id":"u:5e4fdc86abc5","step":1,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:1d06c49dbc3c"}],"className":"m-b"},{"type":"fieldset","id":"u:b8ee82cc2eb9","title":"字体","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"tooltip.textStyle.color","id":"u:70c1fbf4672f","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:ae2f495b3764"},{"body":[{"type":"input-number","label":"大小","name":"tooltip.textStyle.fontSize","keyboard":true,"id":"u:72ceba01a7cc","step":1,"mode":"horizontal"}],"id":"u:33cec15972d4"}],"id":"u:2526fcd05096"}],"id":"u:6922018dd6d1"}],"id":"u:7e7d67ef7752"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:6c0348f13581","data":{"textStyle":{}}}],"bodyClassName":""}],"id":"u:47aacf20a627"}],"id":"u:3749f665c04b","className":"m-b"}],"style":{"position":"static","display":"block"},"data":{"tooltip":{}},"wrapperBody":false}],"bodyClassName":""},{"type":"fieldset","id":"u:3a48dd399109","className":"","title":"x坐标轴","collapsable":true,"body":[{"type":"input-text","id":"u:abb02410fd1c","label":"坐标轴名称","name":"xAxis.name","mode":"horizontal"},{"type":"input-color","label":"名称颜色","name":"xAxis.nameColor","id":"u:b900d1025127","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"container","id":"u:eefe19817538","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"xAxis.show","falseValue":false,"trueValue":true,"id":"u:2096af8308a3","value":false,"mode":"horizontal","className":"m-b"}],"id":"u:4eef8d1cc676"}],"id":"u:ea0f62118b56","className":"m-b"},{"type":"fieldset","id":"u:907187f7e2a1","title":"x轴线","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"x轴轴线显示","option":"","name":"xAxis.axisLine.show","falseValue":false,"trueValue":true,"id":"u:71b59c2bed70","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:118aba12cec1","title":"x轴轴线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"xAxis.axisLine.lineStyle.color","id":"u:8ed5e076ca5c","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:55813e1f8142"},{"body":[{"type":"input-number","label":"宽度","name":"xAxis.axisLine.lineStyle.width","keyboard":true,"id":"u:41934b04ff67","step":1,"mode":"horizontal"}],"id":"u:d7abe8fad5ca"}],"id":"u:893ab7d1ed57"}],"id":"u:227994a18fe9"}],"id":"u:6262674c1c5c"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:85847be141b3","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:92c4666bcef8","data":{"axisLine":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:75c8b571aac0","title":"x轴刻度","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"显示","option":"","name":"xAxis.axisTick.show","falseValue":false,"trueValue":true,"id":"u:fd9e421b00ca","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:0fd48ddb098a","title":"x轴刻度风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"xAxis.axisTick.lineStyle.color","id":"u:e5fca7b0b79b","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:f9e6ec4896c4"},{"body":[{"type":"input-number","label":"宽度","name":"xAxis.axisTick.lineStyle.width","keyboard":true,"id":"u:1571934a432c","step":1,"mode":"horizontal"}],"id":"u:17179e81c729"}],"id":"u:ef9eaed28557"}],"id":"u:d9f5024d9671"}],"id":"u:1b3520d785a5"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:e7dfac0e99fd","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:19673ccefa01","data":{"axisTick":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:20a14bb0f788","title":"x轴标签","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"xAxis.axisLabel.color","id":"u:caf5a900530e","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:cd95dc526524"},{"body":[{"type":"input-number","label":"大小","name":"xAxis.axisLabel.fontSize","keyboard":true,"id":"u:21b8c8b2b0ae","step":1,"mode":"horizontal"}],"id":"u:6db43f6de611"}],"id":"u:b098a9ec59df","className":"m-b-xs"},{"type":"switch","label":"显示","option":"","name":"xAxis.axisLabel.show","falseValue":false,"trueValue":true,"id":"u:1d7c622a336f","value":false,"mode":"horizontal","className":"m-b"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:86e6b7d652a0","data":{"axisLabel":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:a1e52778791f","title":"x轴分割线","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"x轴分割线显示","option":"","name":"xAxis.splitLine.show","falseValue":false,"trueValue":true,"id":"u:e95df5c45a7e","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:66c502dea7a7","title":"x轴分割线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"xAxis.splitLine.lineStyle.color","id":"u:3a618618dae0","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:f46d328a3f22"},{"body":[{"type":"input-number","label":"宽度","name":"xAxis.splitLine.lineStyle.width","keyboard":true,"id":"u:a3ee7bf1223d","step":1,"mode":"horizontal"}],"id":"u:309b42de5f47"}],"id":"u:7c58df9998ec"}],"id":"u:8dd911474f86"}],"id":"u:824a429f7da1"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:6aa6764ef192","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:3a6bddcca5ee","data":{"splitLine":{}}}],"bodyClassName":""}],"id":"u:a8e29911a8e3"}],"id":"u:78f1615eb5a3","className":"m-b"}],"style":{"position":"static","display":"block"},"data":{"xAxis":{}},"wrapperBody":false}],"bodyClassName":""},{"type":"fieldset","id":"u:f9aa35a53b3c","className":"","title":"y坐标轴","collapsable":true,"body":[{"type":"container","id":"u:180e8b28f9fa","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"yAxis.show","falseValue":false,"trueValue":true,"id":"u:c4ef30d500dc","value":false,"mode":"horizontal","className":"m-b"}],"id":"u:8eea96d4f12d"}],"id":"u:acc7e6a4e520","className":"m-b"},{"type":"fieldset","id":"u:ce9d777193df","title":"y轴线","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"y轴轴线显示","option":"","name":"yAxis.axisLine.show","falseValue":false,"trueValue":true,"id":"u:634fa0ea84a5","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:6a2865630e68","title":"y轴轴线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"yAxis.axisLine.lineStyle.color","id":"u:aea16c2c7a84","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:4a754fe50e08"},{"body":[{"type":"input-number","label":"宽度","name":"yAxis.axisLine.lineStyle.width","keyboard":true,"id":"u:290a931d904f","step":1,"mode":"horizontal"}],"id":"u:86515517aa68"}],"id":"u:5529505abbd4"}],"id":"u:219a49a719e6"}],"id":"u:ad675db55c48"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:68d3d781451b","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:1be7f231b28e","data":{"axisLine":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:3fdec5dec631","title":"y轴刻度","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"显示","option":"","name":"yAxis.axisTick.show","falseValue":false,"trueValue":true,"id":"u:58e04faa3c92","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:f18f86b00d5d","title":"y轴刻度风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"yAxis.axisTick.lineStyle.color","id":"u:be3f5eee553c","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:7bcc36e22821"},{"body":[{"type":"input-number","label":"宽度","name":"yAxis.axisTick.lineStyle.width","keyboard":true,"id":"u:e04f3f6f2cc3","step":1,"mode":"horizontal"}],"id":"u:4ba5d2e1ea07"}],"id":"u:6440d669f360"}],"id":"u:ad68ce859a7c"}],"id":"u:4a7d06fdb2b4"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:b25293793d7f","data":{"lineStyle":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:93bd4fed48ff","title":"y轴标签","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"yAxis.axisLabel.color","id":"u:7fa26ddc1ab5","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:fd3336725b84"},{"body":[{"type":"input-number","label":"大小","name":"yAxis.axisLabel.fontSize","keyboard":true,"id":"u:65037a8397ee","step":1,"mode":"horizontal"}],"id":"u:d5b399f13ea4"}],"id":"u:95ad7678203e","className":"m-b-xs"},{"type":"switch","label":"显示","option":"","name":"yAxis.axisLabel.show","falseValue":false,"trueValue":true,"id":"u:7cb8264230b1","value":false,"mode":"horizontal","className":"m-b"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:95667fb0c244","data":{"axisLabel":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:c845c3a67039","data":{"axisTick":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:0a1a84201903","title":"y轴分割线","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"y轴分割线显示","option":"","name":"yAxis.splitLine.show","falseValue":false,"trueValue":true,"id":"u:caa3b966e95b","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:97085338bd02","title":"y轴分割线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"yAxis.splitLine.lineStyle.color","id":"u:729dbec8be7c","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:18f6ccdafb5f"},{"body":[{"type":"input-number","label":"宽度","name":"yAxis.splitLine.lineStyle.width","keyboard":true,"id":"u:8c714596c1b2","step":1,"mode":"horizontal"}],"id":"u:d0cd18f6138e"}],"id":"u:d0902c0487aa"}],"id":"u:2bed8554fd13"}],"id":"u:5356527017b0"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:b4e230155075","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:e2ba52918887","data":{"splitLine":{}}}],"bodyClassName":""}],"id":"u:a9fe7db6d069"}],"id":"u:40507e55fde2","className":"m-b"}],"style":{"position":"static","display":"block"},"data":{"yAxis":{}},"wrapperBody":false}],"bodyClassName":""},{"type":"fieldset","title":"代码配置","collapsable":true,"body":[{"type":"editor","label":"function (option, datas, instance) {","name":"codeConfig","id":"u:689625dc5d7d","language":"javascript","value":"return option","labelClassName":"text-left","inputClassName":"text-left","className":"m-b-xs"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:f533d43d9ee4","className":"m-t-xs p-t-xs"}],"id":"u:cf0267c9669d","headingClassName":""}],"id":"u:a5ebe5f02407","submitText":"","onEvent":{"change":{"weight":0,"actions":[]}},"debug":false,"mode":"normal","panelClassName":"p","labelAlign":"left","className":"","wrapWithPanel":true,"actions":[]}],"id":"u:c309ae58472c","className":"p-none no-border"},{"title":"交互","icon":"fa fa-calendar-minus-o","body":[{"type":"service","body":[{"type":"collapse","key":"1","active":true,"header":"常规","body":[{"type":"service","id":"u:6cb6d200ede2","data":{"dataPoint":"","compareType":"","conditionVariables":[],"defaultValue":"","unit":""},"body":[{"type":"input-text","label":"数据点","name":"dataPoint","id":"normalDataPoint","multiple":false,"mode":"horizontal","size":"full","onEvent":{"focus":{"weight":0,"actions":[{"actionType":"dialog","dialog":{"type":"dialog","title":"请配置需要绑定的数据点","body":[{"type":"tabs","tabs":[{"title":"常规数据点","body":[{"type":"form","title":"","body":[{"type":"select","label":"数据源","name":"dataSource","id":"u:c273f087b8ed","mode":"horizontal","multiple":false,"size":"md","horizontal":{"leftFixed":"sm"},"source":"\${apiDtoList || thingApiDTOList}","labelField":"name","valueField":"id","onEvent":{"change":{"actions":[{"actionType":"reload","componentId":"u:1cdb908c23a8"},{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:1cdb908c23a8', 'args': {'value': ''} });\\r\\n doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"clearable":true,"actionType":"change","target":"u:1cdb908c23a8"},{"type":"combo","label":"设备属性","name":"deviceAttrs","id":"u:98559a2dd514","multiple":false,"mode":"horizontal","size":"full","horizontal":{"leftFixed":"sm"},"items":[{"type":"input-table","label":false,"id":"u:41dfc35c368c","name":"table","strictMode":false,"needConfirm":false,"addable":true,"removable":true,"columns":[{"type":"input-text","label":"序号","id":"u:434e22030bc6","name":"num","size":"sm","mode":"horizontal","quickEdit":{"mode":"popOver","id":"u:c6a294f5c93a"},"horizontal":{"left":2,"right":10},"placeholder":"例：A/B/C/AA/BB","width":200},{"type":"select","name":"devices","id":"u:1cdb908c23a8","label":"设备","multiple":false,"mode":"horizontal","quickEdit":true,"size":"sm","source":{"url":"/thing/v2/api/telemetryById?id=\${dataSource}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"adaptor":"if (payload && payload.data && payload.data.result) {console.log('payload.data.result', payload.data.result); \\r\\n const list = []\\r\\n const devices = payload.data.result.info \\r\\n for (const key in devices) {\\r\\n const device_info = devices[key] \\r\\n list.push({\\r\\n label: device_info.entityName,\\r\\n value: device_info.entityId,\\r\\n deviceCode: device_info.entityCode,\\r\\n deviceInfo: device_info,\\r\\n attrs: device_info.attrs })\\r\\n }\\r\\n payload.data = list;\\r\\n return payload\\r\\n}","sendOn":"this.dataSource"},"onEvent":{"change":{"actions":[{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"responseData":{"&":"$$","list":"\${items}"},"clearable":true,"horizontal":{"left":2,"right":10},"checkAll":false},{"type":"select","name":"dataPoint","id":"u:8147daea685d","label":"数据点","multiple":false,"quickEdit":true,"mode":"horizontal","size":"sm","source":{"url":"/thing/v2/api/callDict?id=\${dataSource}&entityId=\${devices}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"sendOn":"this.dataSource && this.devices","adaptor":"const list = payload.data.map(item => {\\r\\n item.dictName = item.dictName + ' - ' + item.dictCode\\r\\n return item\\r\\n})\\r\\npayload.data = list;\\r\\nreturn payload"},"labelField":"dictName","valueField":"dictCode","checkAll":false,"horizontal":{"left":2,"right":10},"overlay":{"width":"350px"},"searchable":true}]}],"strictMode":true,"syncFields":[],"tabsMode":false,"canAccessSuperData":true,"inputClassName":"w-full","className":"m-b-sm"},{"type":"checkbox","label":"数据处理","name":"enableDataHandle","id":"u:034ca60f2135","mode":"horizontal","horizontal":{"leftFixed":"normal"},"option":""},{"type":"combo","id":"u:a06125153fa6","name":"calcRules","label":"计算规则","mode":"horizontal","visibleOn":"this.enableDataHandle","multiple":true,"items":[{"name":"formular","label":"计算公式","type":"input-text","id":"u:318a7f0c6449","placeholder":"例： (A + B) / C","width":"50%","size":"full"},{"name":"resultAttr","label":"计算结果属性","type":"input-text","id":"u:1e6e491ccbaa","placeholder":"例：A8、B、C...","width":"50%"}],"strictMode":true,"syncFields":[],"hidden":false,"inputClassName":"w-full","multiLine":false,"className":"calcRules"},{"type":"input-text","label":"唯一数据点","name":"uniquePoint","id":"u:3b257b599c19","mode":"horizontal","visibleOn":"this.enableDataHandle","editorState":"default","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","title":"场景：","content":"当有数据处理，并且只需绑定一个数据点作为 【实时/立即/最新数据】时，请填写所需数据点的序号或计算结果属性。"},"inputControlClassName":"m-b"}],"id":"u:51f0e51abd7c","data":{"attrs":[],"deviceCode":"\${deviceCode || ''}","devices":"\${devices || ''}","dataPoint":"\${dataPoint || ''}","dataSource":"\${dataSource || ''}","deviceAttrs":"\${deviceAttrs || []}"},"submitText":"","onEvent":{"inited":{"actions":{"actionType":"custom","script":"if(event.data.devices && event.data.dataPoint && event.data.deviceAttrs.length === 0) { const dataPoints = event.data.dataPoint.split(','); const newDeviceAttrs = dataPoints.map((point, idx) => ({ num: String.fromCharCode(65+idx), devices: event.data.devices, dataPoint: point }) ); doAction({ 'actionType': 'setValue', 'componentId': 'u:51f0e51abd7c', 'args': { value: {deviceAttrs: { table: newDeviceAttrs } }} }); }"}}}}],"id":"u:5505e7ef7cab"},{"title":"虚拟变量","body":[{"type":"tpl","tpl":"暂时无虚拟变量可配置","wrapperComponent":"","inline":false,"id":"u:722592249b31"}],"id":"u:b739cc6a6ed7"}],"id":"u:3b446450d643"}],"showCloseButton":true,"showErrorMsg":true,"showLoading":true,"id":"u:f46c2439c983","data":{"&":"\${dataPoint | toJson}","apiDtoList":"\${thingApiDTOList}","myToken":"\${myToken}","myTenantCode":"\${myTenantCode}","myCompanyId":"\${myCompanyId}"},"onEvent":{"confirm":{"actions":[{"actionType":"custom","script":"const tableData = event.data.deviceAttrs.table; let devices = ''; let dataPoint = ''; if(tableData) { tableData.forEach(item => { devices += (item.devices + ',');dataPoint += (item.dataPoint + ','); });}; if(tableData && tableData.length > 0) { devices = devices.substring(0, devices.length - 1); dataPoint = dataPoint.substring(0, dataPoint.length - 1); const newValue = {...event.data, devices: devices, dataPoint: dataPoint, dataSource: event.data.dataSource} ; doAction({ 'componentId': 'normalDataPoint', 'actionType': 'setValue', 'args': { value: JSON.stringify(newValue) } }) } else {doAction({ 'componentId': 'normalDataPoint', 'actionType': 'setValue', 'args': { value: JSON.stringify(event.data) } }) };"}]}},"closeOnEsc":false,"size":"lg"}}]}},"className":"w-full m-b-sm","inputClassName":"w-full","clearable":true},{"type":"input-text","label":"默认值","clearable":true,"name":"defaultValue","id":"u:13ccbc565f5e","mode":"horizontal","size":"full","inputControlClassName":"mb-sm","labelClassName":"mb-sm","className":"m-b-sm"},{"type":"input-text","label":"单位   ","name":"unit","id":"u:0f606558e8c7","mode":"horizontal","size":"full","className":"m-b-sm"},{"type":"input-number","label":"渲染间隔","name":"renderInterval","keyboard":true,"id":"u:3f7cb08b0e2b","step":1,"mode":"horizontal","unitOptions":["ms"],"min":30000,"labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"最低渲染间隔为30秒","title":"提示："}},{"type":"switch","label":"开启渲染间隔","option":"","name":"renderIntervalEnabled","falseValue":false,"trueValue":true,"id":"u:9486003439ac","value":true,"mode":"horizontal","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"关闭渲染间隔，将会渲染socket 推送的实时数据，意味着此时配置的数据源api如果不是 “最新” 值，将不会渲染。并且关闭渲染间隔后，需保存并刷新看板，才能看到效果。","title":"提示："}},{"type":"select","label":"时间轴格式化","name":"timeAxisFormatter","options":[{"label":"时","value":"HH"},{"label":"时分","value":"HH:mm"},{"label":"日","value":"DD"},{"label":"日 时分","value":"DD HH:mm"},{"label":"月","value":"MM"},{"label":"月日","value":"MM-DD"},{"label":"月日时分","value":"MM-DD HH:mm"}],"id":"u:362d1b26c7f0","multiple":false,"mode":"horizontal","inputClassName":"w-full","clearable":true},{"type":"switch","label":"补全数据","option":"","name":"completeDatas","falseValue":false,"trueValue":true,"id":"u:ce012e34fcb6","value":false,"mode":"horizontal","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"补齐一个时间区间内没有的数据"}},{"type":"select","label":"时间对比","name":"timeCompare","options":[{"label":"今日-昨日","value":"day"},{"label":"当月-上月","value":"month"},{"label":"今年-去年","value":"year"}],"id":"u:12f8f50a7559","mode":"horizontal","inputClassName":"w-full","clearable":true,"labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"用于时间区间，例如【两日、两月、两年】等的【对比分析】场景"},"visibleOn":"this.completeDatas","multiple":false},{"type":"radios","label":"数据展示","name":"dataShowTypes","options":[{"label":"单个物单个属性","value":"oneThingOneAttr"},{"label":"单个物多个属性","value":"oneThingManyAttr"},{"label":"多个物多个属性","value":"manyThingManyAttr"},{"label":"多个物一个属性","value":"manyThingOneAttr"}],"id":"u:b8aeecd9e52f","mode":"horizontal","inputClassName":"w-full","itemClassName":"w-full","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"请确保数据点的选择与数据展示方式一致"},"onEvent":{"change":{"actions":[{"componentId":"u:0fc48eacd2a4","actionType":"setValue","args":{"value":""}}]}}},{"type":"select","label":"图例名称展示","name":"legendNameType","options":[{"label":"物名称","value":"thingName","disabledOn":"this.dataShowTypes === 'oneThingManyAttr' || this.dataShowTypes === 'manyThingManyAttr' "},{"label":"物编码","value":"thingCode","disabledOn":"this.dataShowTypes === 'oneThingManyAttr' || this.dataShowTypes === 'manyThingManyAttr'"},{"label":"属性名称","value":"attrName","disabledOn":"this.dataShowTypes === 'manyThingManyAttr' || this.dataShowTypes === 'manyThingOneAttr'"},{"label":"属性编码","value":"attrCode","disabledOn":"this.dataShowTypes === 'manyThingManyAttr' || this.dataShowTypes === 'manyThingOneAttr'"},{"label":"物名称 + 属性名称","value":"thingNameAttrName"},{"label":"物编码 + 属性编码","value":"thingCodeAttrCode"}],"id":"u:0fc48eacd2a4","multiple":false,"mode":"horizontal","inputClassName":"w-full","value":"attrName"},{"type":"switch","label":"自定义数据源","option":"","name":"customDatasource","falseValue":false,"trueValue":true,"id":"u:648ca964f693","value":false,"mode":"horizontal"},{"type":"input-text","label":"数据源api","name":"dataPoint","id":"normalDataPoint","multiple":false,"mode":"horizontal","size":"full","className":"w-full m-b-sm","inputClassName":"w-full","clearable":true,"visibleOn":"this.customDatasource"},{"type":"radios","label":"请求方式","name":"requestMethod","options":[{"label":"get 请求","value":"get"},{"label":"post 请求","value":"post"}],"id":"u:2c48207f4f65","mode":"horizontal","visibleOn":"this.customDatasource","value":"get"},{"type":"editor","label":"请求入参","name":"requestParams","id":"u:e94982b03d0c","language":"javascript","value":"return {};","visibleOn":"this.customDatasource","inputClassName":"","className":"text-left"},{"type":"editor","label":"数据过滤","name":"dataFilterFn","id":"u:f9ef754971e0","language":"javascript","value":"// datas 数据处理\\n// ....\\n","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"入参api返回数据： datas"},"labelClassName":"text-left","inputClassName":"text-left","options":{"lineNumbers":"off"},"visibleOn":"this.customDatasource"}],"name":"normalService","className":"p-none"},{"type":"service","body":[],"id":"u:0dd069ac163f"}],"id":"u:7b021709614e","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"}],"id":"u:3eb6b9a42dcb","name":"dynamicService"}],"id":"u:043251c106af","className":"p-sm"},{"title":"脚本解析","icon":"fa fa-star","body":[{"type":"flex","id":"u:edef8e21c1e3","justify":"flex-end","items":[{"type":"button","id":"u:f6d8d837a48d","label":"导入","onEvent":{"click":{"actions":[]}},"icon":"fa fa-download","level":"primary","className":"mr-2"},{"type":"button","id":"u:23f988f98a28","label":"保存","onEvent":{"click":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":true}}}]}},"icon":"fa fa-save"}]},{"type":"service","id":"u:6dc2a126004a","body":[{"type":"tpl","id":"u:c77724a2f3b3","tpl":"function (context, service, nodeId) {","inline":true,"wrapperComponent":"","style":{"fontFamily":"","fontSize":16}},{"type":"editor","label":"","name":"script","id":"u:55ceb80e58a7","language":"javascript","size":"xxl","className":"m-b-none","onEvent":{"focus":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":false}}}]}},"description":"参数提示：\\n1. context 是整个看板上下文，可以获取看板所有元素节点和连线节点，也可以访问 context.globalDatas 获取全局socket 数据。 \\n2. service 是 Ajax 请求服务。\\n3. nodeId 是节点 id . \\n4. 如果返回一个函数，则可以当socket 数据更新时，调用此函数，此函数入参分别是 context, service, nodeId, globalDatas ;，以满足多样化的业务需求。"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:fa21aebb859b","style":{"fontFamily":"","fontSize":16}}],"name":"scriptService","data":{"script":"","save":false},"className":"text-left"}],"id":"u:dc8d331cbe5e"}],"id":"u:178107498966","tabsMode":"radio","className":"p-none w-full","contentClassName":"p-none"}],"className":""}`,r={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true},{"url":"./plugins/echarts.min.js","isModule":false,"disabled":false}]',json:`{
|
|
"nodes": [
|
|
{
|
|
"id": "a3c0bb09-4bc9-4717-8adc-ff83e5eee086",
|
|
"type": "custom-line-chart",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "a3c0bb09-4bc9-4717-8adc-ff83e5eee086",
|
|
"width": 350,
|
|
"height": 250,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"opacity": 1,
|
|
"grid": {
|
|
"show": false,
|
|
"top": "25",
|
|
"left": "30",
|
|
"right": "5",
|
|
"bottom": "20",
|
|
"backgroundColor": ""
|
|
},
|
|
"title": {
|
|
"show": true,
|
|
"padding": "",
|
|
"left": "30",
|
|
"right": "2",
|
|
"top": "2",
|
|
"bottom": "2",
|
|
"text": "kWh",
|
|
"textAlign": "auto",
|
|
"textVerticalAlign ": "middle"
|
|
},
|
|
"legend": {
|
|
"show": true,
|
|
"orient": "horizontal",
|
|
"left": "center",
|
|
"top": ""
|
|
},
|
|
"tooltip": {
|
|
"show": true,
|
|
"showContent": true,
|
|
"trigger": "axis"
|
|
},
|
|
"xAxis": {
|
|
"show": true,
|
|
"axisLine": {
|
|
"show": true
|
|
},
|
|
"axisTick": {
|
|
"show": true
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"fontSize": 12
|
|
},
|
|
"splitLine": {
|
|
"show": false
|
|
},
|
|
"type ": "category",
|
|
"name": "",
|
|
"nameColor": ""
|
|
},
|
|
"yAxis": {
|
|
"show": true,
|
|
"axisLine": {
|
|
"show": true
|
|
},
|
|
"axisTick": {
|
|
"show": true
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"fontSize": 12
|
|
},
|
|
"splitLine": {
|
|
"show": false
|
|
},
|
|
"type ": "value"
|
|
},
|
|
"codeConfig": "option.color = ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'];\\r\\n\\r\\n// 值保留为两位小数。\\r\\noption.valueFormatter = (value) => {\\r\\n if (typeof value === 'number') {\\r\\n return value.toFixed(2);\\r\\n } else {\\r\\n return value\\r\\n }\\r\\n};\\r\\n\\r\\noption.series.forEach((item) => {\\r\\n // item.stack = \\"total\\";\\r\\n item.smooth = \\"true\\";\\r\\n // 区域风格，可配置\\r\\n // item.areaStyle = {};\\r\\n // 线条风格, 可自定义\\r\\n item.lineStyle = {\\r\\n width: 1\\r\\n };\\r\\n});\\r\\nreturn option;",
|
|
"fontSize": 0,
|
|
"showDefaultValue": false,
|
|
"showUnit": false,
|
|
"nodeAlias": "折线图",
|
|
"renderMode": "canvas",
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": "",
|
|
"unit": "",
|
|
"renderIntervalEnabled": true,
|
|
"completeDatas": false,
|
|
"legendNameType": "attrName",
|
|
"customDatasource": false,
|
|
"dataShowTypes": "oneThingManyAttr",
|
|
"timeAxisFormatter": "HH",
|
|
"requestMethod": "get",
|
|
"requestParams": "return {};",
|
|
"dataFilterFn": "// datas 数据处理\\n// ....\\n"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,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" }) });
|
|
timeArr.forEach((i, index) => { const t = window.dayjs().hour(index).valueOf(); totals.push({ val: Math.random(1000) * 100, ts: t, attrKey: "A8" }) });
|
|
const defaultSocketValue = totals;
|
|
|
|
const xAxisLabelFormatter = function (val) {
|
|
if (this.timeCompare) return;
|
|
if (this.timeAxisFormatter) {
|
|
return dayjs(+val).format(this.timeAxisFormatter);
|
|
}
|
|
const { months, days } = this;
|
|
if (months === 0 && days === 0) {
|
|
return dayjs(+val).format("HH:mm");
|
|
} else if (months === 0 && days > 0) {
|
|
return dayjs(+val).format("DD HH:mm");
|
|
} else if (months > 0 && days >= 0) {
|
|
return dayjs(+val).format("MM-DD HH:mm");
|
|
}
|
|
};
|
|
|
|
// 工具提示格式化
|
|
const tooltipFormatter = function (params) {
|
|
let strs = "";
|
|
const timeFormatterMap = {
|
|
"HH": '时',
|
|
"DD": '日',
|
|
'MM': '月'
|
|
}
|
|
const time = this.timeCompare ? params[0].name : window.dayjs.unix(+params[0].name / 1000).format(this.timeAxisFormatter || "YYYY-MM-DD HH:mm:ss");
|
|
strs += \`<div>\${time} \${timeFormatterMap[this.timeAxisFormatter] || ''}</div>\`;
|
|
params.forEach((param) => {
|
|
strs += param.marker + " " + param.seriesName + ":  " + Number(param.value).toFixed(2) + "<br/>";
|
|
})
|
|
return strs;
|
|
};
|
|
|
|
// 图例格式化
|
|
const assembleLegend = (api, thingKey, attrkey, dataShowTypes, legendNameType, datas) => {
|
|
if (api) {
|
|
const infos = window.totalDeviceInfos[api];
|
|
if (!infos) return;
|
|
if (!datas[0]) return;
|
|
const thing = infos[datas[0].thingCode];
|
|
if (!thing) return;
|
|
const thingName = thing.entityName;
|
|
const attrName = thing.attrs[attrkey].name;
|
|
if (dataShowTypes.value === 'oneThingOneAttr') {
|
|
switch (legendNameType.value) {
|
|
case "thingName":
|
|
return thing.entityName;
|
|
case "thingCode":
|
|
return thingKey;
|
|
case "attrName":
|
|
return attrName;
|
|
case "attrCode":
|
|
return attrkey;
|
|
case "thingNameAttrName":
|
|
return thingName + '-' + attrName;
|
|
case "thingCodeAttrCode":
|
|
return thingKey + '-' + attrkey;
|
|
}
|
|
} else if (dataShowTypes.value === 'oneThingManyAttr') {
|
|
switch (legendNameType.value) {
|
|
case "attrName":
|
|
return thing.attrs[attrkey].name;
|
|
case "attrCode":
|
|
return attrkey;
|
|
case "thingNameAttrName":
|
|
return thingName + '-' + attrName;
|
|
case "thingCodeAttrCode":
|
|
return thingKey + '-' + thingKey
|
|
}
|
|
} else if (dataShowTypes.value === 'manyThingManyAttr') {
|
|
switch (legendNameType.value) {
|
|
case "thingNameAttrName":
|
|
const attrName = thing.attrs[attrKey].name
|
|
return thingName + '-' + attrName;
|
|
case "thingCodeAttrCode":
|
|
return thingKey + '-' + thingKey;
|
|
}
|
|
} else if (dataShowTypes.value === 'manyThingOneAttr') {
|
|
switch (legendNameType.value) {
|
|
case "thingName":
|
|
return thingName;
|
|
case "thingCode":
|
|
return thingKey;
|
|
case "thingNameAttrName":
|
|
const attrName = thing.attrs[attrKey].name
|
|
return thingName + '-' + attrName;
|
|
case "thingCodeAttrCode":
|
|
return thingKey + '-' + thingKey;
|
|
}
|
|
}
|
|
} else {
|
|
return attrkey;
|
|
}
|
|
}
|
|
|
|
|
|
const LineChart = {
|
|
template: '<div :id="lineId" :style="getStyle" class="custom-line-chart"></div>',
|
|
props: {
|
|
lineId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
historyDatas: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 350
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 150
|
|
},
|
|
grid: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
title: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
legend: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
tooltip: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
xAxis: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
yAxis: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
codeConfig: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
timeAxisFormatter: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
completeDatas: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
totalTimes: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
timeCompare: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
dataShowTypes: {
|
|
type: String,
|
|
default: 'oneThingManyAttr',
|
|
},
|
|
legendNameType: {
|
|
type: String,
|
|
default: 'attrName',
|
|
},
|
|
apiid: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
renderMode: {
|
|
type: String,
|
|
default: 'canvas',
|
|
}
|
|
},
|
|
computed: {
|
|
getStyle() {
|
|
return {
|
|
width: \`\${this.width}px\`,
|
|
height: \`\${this.height}px\`
|
|
}
|
|
}
|
|
},
|
|
setup(props) {
|
|
const { onMounted, nextTick, toRefs, watch } = Vue;
|
|
const { grid, title, legend, tooltip, xAxis, yAxis, historyDatas, codeConfig, timeAxisFormatter, completeDatas, totalTimes, timeCompare, dataShowTypes, legendNameType, apiid, renderMode } = toRefs(props)
|
|
|
|
const tooltipFormatterBound = tooltipFormatter.bind({ timeCompare: timeCompare.value, timeAxisFormatter: timeAxisFormatter.value });
|
|
let myChart = null;
|
|
let timeCompareMap = {
|
|
'day': {
|
|
prev: '昨日',
|
|
curr: '今日'
|
|
},
|
|
'month': {
|
|
prev: '上月',
|
|
curr: '当月'
|
|
},
|
|
'year': {
|
|
prev: '去年',
|
|
curr: '今年'
|
|
},
|
|
}
|
|
const initChart = (datas) => {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
const dom = document.getElementById(props.lineId);
|
|
if (dom && !myChart) {
|
|
myChart = echarts.init(dom, null, {
|
|
renderer: renderMode.value
|
|
});
|
|
if (datas) {
|
|
let series = [];
|
|
let legends = [];
|
|
let xAxisData = [];
|
|
let xAxisLabelFormatterBound = null;
|
|
if (datas.length > 0) {
|
|
const thingGrouped = window._.groupBy(datas, 'thingCode');
|
|
for (const thingKey in thingGrouped) {
|
|
const attrGrouped = window._.groupBy(thingGrouped[thingKey], 'attrKey')
|
|
const keysLen = Object.keys(attrGrouped).length;
|
|
for (const key in attrGrouped) {
|
|
let serieData = attrGrouped[key];
|
|
const legendKey = assembleLegend(apiid.value, thingKey, key, dataShowTypes, legendNameType, serieData);
|
|
legends.push(legendKey);
|
|
if (!xAxisLabelFormatterBound) {
|
|
const first = serieData[0];
|
|
const last = serieData[serieData.length - 1];
|
|
if (first.ts > last.ts) {
|
|
serieData = serieData.reverse()
|
|
}
|
|
const dayjs = window.dayjs;
|
|
const firstDay = dayjs(+first.ts);
|
|
const lastDay = dayjs(+last.ts);
|
|
const days = firstDay.diff(lastDay, 'day');
|
|
const months = firstDay.diff(lastDay, 'month');
|
|
xAxisLabelFormatterBound = xAxisLabelFormatter.bind({
|
|
months,
|
|
days,
|
|
timeAxisFormatter: timeAxisFormatter.value,
|
|
timeCompare: completeDatas.value && timeCompare.value,
|
|
})
|
|
}
|
|
if (completeDatas.value && totalTimes.value.length > 0) {
|
|
// 如果需要补全一个区间内的缺失数据
|
|
// console.log('serieData', serieData);
|
|
if (timeCompare.value) {
|
|
const splitTimes = window.splitTimes(totalTimes.value, timeCompare.value);
|
|
const realIndexs = {}; // 正确数据索引
|
|
const prevValues = splitTimes.prev.map((t, index) => {
|
|
let tVal = null;
|
|
if (timeCompare.value === 'day') {
|
|
tVal = dayjs(t).format(timeAxisFormatter.value || 'HH:mm');
|
|
} else if (timeCompare.value === 'month') {
|
|
tVal = dayjs(t).format(timeAxisFormatter.value || 'DD');
|
|
} else if (timeCompare.value === 'year') {
|
|
tVal = dayjs(t).format(timeAxisFormatter.value || 'MM');
|
|
}
|
|
if (!xAxisData.includes(tVal)) {
|
|
xAxisData.push(tVal);
|
|
realIndexs[index] = true;
|
|
const point = serieData.find(d => +d.ts === t);
|
|
return (point && point.val) || 0
|
|
}
|
|
})
|
|
const currValues = splitTimes.curr.map((t, index) => {
|
|
if (xAxisData.length === 0) {
|
|
let tVal = null;
|
|
if (timeCompare.value === 'day') {
|
|
tVal = dayjs(t).format(timeAxisFormatter.value || 'HH:mm');
|
|
} else if (timeCompare.value === 'month') {
|
|
tVal = dayjs(t).format(timeAxisFormatter.value || 'DD');
|
|
} else if (timeCompare.value === 'year') {
|
|
tVal = dayjs(t).format(timeAxisFormatter.value || 'MM');
|
|
}
|
|
if (!xAxisData.includes(tVal)) {
|
|
xAxisData.push(tVal);
|
|
const point = serieData.find(d => +d.ts === t);
|
|
return (point && point.val) || 0
|
|
}
|
|
} else {
|
|
if (realIndexs[index]) {
|
|
const point = serieData.find(d => +d.ts === t);
|
|
return (point && point.val) || 0
|
|
}
|
|
}
|
|
})
|
|
let legendPrev = '';
|
|
let legendCurr = '';
|
|
if (keysLen > 1) {
|
|
legendPrev = \`\${legendKey}(\${timeCompareMap[timeCompare.value].prev})\`;
|
|
legendCurr = \`\${legendKey}(\${timeCompareMap[timeCompare.value].curr})\`;
|
|
} else if (keysLen === 1) {
|
|
legendPrev = \`\${timeCompareMap[timeCompare.value].prev}\`;
|
|
legendCurr = \`\${timeCompareMap[timeCompare.value].curr}\`;
|
|
}
|
|
legends.push(legendPrev);
|
|
legends.push(legendCurr);
|
|
series.push({
|
|
name: legendPrev,
|
|
type: 'line',
|
|
data: prevValues.filter(Boolean)
|
|
})
|
|
series.push({
|
|
name: legendCurr,
|
|
type: 'line',
|
|
data: currValues.filter(Boolean)
|
|
})
|
|
} else {
|
|
const serieValues = totalTimes.value.map(t => {
|
|
xAxisData.push(t);
|
|
const point = serieData.find(d => +d.ts === t);
|
|
return (point && point.val) || 0
|
|
})
|
|
series.push({
|
|
name: legendKey,
|
|
type: 'line',
|
|
data: serieValues
|
|
})
|
|
}
|
|
} else {
|
|
const serieValues = serieData.map((point) => {
|
|
xAxisData.push(+point.ts);
|
|
return point.val;
|
|
})
|
|
series.push({
|
|
name: legendKey,
|
|
type: 'line',
|
|
data: serieValues
|
|
})
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
legends = ['测试图例']
|
|
xAxisData = [1, 2, 3, 4, 5, 6, 7, 8]
|
|
series = [{
|
|
type: 'line',
|
|
name: '测试图例',
|
|
data: [],
|
|
}]
|
|
}
|
|
|
|
// xAxisData 去重
|
|
xAxisData = [...new Set(xAxisData)].sort();
|
|
|
|
const legendConfig = {
|
|
...legend.value,
|
|
data: legends.filter(Boolean)
|
|
}
|
|
|
|
const xAxisConfig = {
|
|
...xAxis.value,
|
|
axisLabel: {
|
|
...xAxis.value.axisLabel,
|
|
formatter: (completeDatas.value && timeCompare.value) ? null : xAxisLabelFormatterBound
|
|
},
|
|
nameLocation: 'end',
|
|
nameGap: 5,
|
|
nameTextStyle: {
|
|
color: xAxis.value.nameColor,
|
|
verticalAlign: 'top',
|
|
lineHeight: 28
|
|
},
|
|
data: xAxisData
|
|
}
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
grid: grid.value,
|
|
title: title.value,
|
|
tooltip: {
|
|
...tooltip.value,
|
|
formatter: tooltipFormatterBound,
|
|
borderColor: tooltip.value.backgroundColor,
|
|
textStyle: {
|
|
...tooltip.value.textStyle,
|
|
align: 'left'
|
|
}
|
|
},
|
|
legend: legendConfig,
|
|
xAxis: xAxisConfig,
|
|
yAxis: yAxis.value,
|
|
series: series,
|
|
};
|
|
const func = new Function('option', 'datas', 'instance', codeConfig.value);
|
|
const opt = func(window._.cloneDeep(option), datas, myChart);
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(opt);
|
|
}
|
|
}
|
|
}
|
|
|
|
watch(historyDatas, (val) => {
|
|
if (val) {
|
|
nextTick(() => {
|
|
initChart(val)
|
|
})
|
|
}
|
|
}, {
|
|
immediate: true
|
|
})
|
|
}
|
|
}
|
|
|
|
class CustomLineChartNode extends HtmlResize.view {
|
|
chartRendered = false
|
|
historyDatas = []
|
|
oldProperties = "{}"
|
|
|
|
setHtml(rootEl) {
|
|
if (!rootEl) return;
|
|
const { properties, width, height, } = this.props.model;
|
|
const { nodeAlias, grid, title, legend, tooltip, xAxis, yAxis, codeConfig, dynamic, apiid, renderMode } = properties;
|
|
const { normalData } = dynamic || {};
|
|
const { timeAxisFormatter, completeDatas, timeCompare, dataShowTypes, legendNameType } = normalData || {};
|
|
|
|
let totalTimes = [];
|
|
if (completeDatas) {
|
|
if (apiid) {
|
|
const param = window.totalApiParams[apiid];
|
|
const info = totalDeviceInfos[apiid];
|
|
totalTimes = window.completeTimesForChart(param, info, this.historyDatas, apiid);
|
|
}
|
|
}
|
|
|
|
const el = document.createElement('div');
|
|
rootEl.innerHTML = '';
|
|
const instance = createVNode(LineChart, {
|
|
name: nodeAlias,
|
|
lineId: \`line-\${properties.id}\`,
|
|
historyDatas: this.historyDatas,
|
|
width,
|
|
height,
|
|
grid, title, legend, tooltip, xAxis, yAxis,
|
|
codeConfig,
|
|
timeAxisFormatter, completeDatas,
|
|
totalTimes,
|
|
timeCompare,
|
|
apiid, dataShowTypes, legendNameType,
|
|
renderMode
|
|
})
|
|
instance.appContext = app._context
|
|
render(instance, el)
|
|
rootEl.appendChild(el);
|
|
}
|
|
|
|
sameProps(properties) {
|
|
const isSame = window._.isEqual(JSON.parse(this.oldProperties), properties);
|
|
if (isSame) return true;
|
|
this.oldProperties = JSON.stringify(properties);
|
|
return false
|
|
}
|
|
|
|
// 过滤历史数据
|
|
filterHistoryData(thingCodeArr, dataPointArr, apiid, renderIntervalEnabled) {
|
|
if (dataPointArr && dataPointArr.length > 0) {
|
|
let datas = []
|
|
if (renderIntervalEnabled) {
|
|
datas = window.totalHistoryDatas[apiid];
|
|
} else {
|
|
if (window.globalDashboardDatas[apiid]) {
|
|
datas = window.globalDashboardDatas[apiid].values;
|
|
}
|
|
}
|
|
if (datas && datas.length > 0) {
|
|
const gotValues = datas.filter((val) => thingCodeArr.includes(val.thingCode) && dataPointArr.includes(val.attrKey))
|
|
this.historyDatas = gotValues
|
|
this.chartRendered = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 生命周期 支持重写内容, 但格式需一致
|
|
shouldUpdate() {
|
|
const { properties } = this.props.model;
|
|
const { apiid } = properties;
|
|
const { normalData } = properties.dynamic || {};
|
|
const { dataPointArr, defaultValue, thingCodeArr, customApiDatas } = normalData || {}
|
|
|
|
if (normalData && !normalData.dataPoint && !normalData.defaultValue) {
|
|
this.historyDatas = defaultSocketValue;
|
|
return true
|
|
} else if (normalData && !normalData.dataPoint && normalData.defaultValue) {
|
|
this.historyDatas = JSON.parse(defaultValue);
|
|
return true
|
|
}
|
|
|
|
// 如果采用来自自定义数据源的数据
|
|
if (customApiDatas) {
|
|
this.historyDatas = customApiDatas;
|
|
return true
|
|
}
|
|
|
|
const propertiesBack = window._.cloneDeep(properties);
|
|
if (propertiesBack.dynamic.normalData) {
|
|
propertiesBack.dynamic.normalData.defaultValue = '';
|
|
if (this.sameProps(propertiesBack) && this.chartRendered) {
|
|
return false
|
|
}
|
|
|
|
if (dataPointArr && apiid && !this.chartRendered) {
|
|
this.filterHistoryData(thingCodeArr, dataPointArr, apiid, normalData.renderIntervalEnabled);
|
|
return true;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
updateHtml() {
|
|
this.setHtml(this.rootEl);
|
|
}
|
|
|
|
componentDidMount() {
|
|
// 防止拖动时候频繁渲染图表
|
|
this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500);
|
|
const { properties } = this.props.model;
|
|
const { normalData } = properties.dynamic || {};
|
|
const { renderInterval, dataPointArr, thingCodeArr } = normalData || {};
|
|
if (this.shouldUpdate()) {
|
|
this.setHtml(this.rootEl);
|
|
}
|
|
const initRender = () => {
|
|
// 第一次历史数据返回可能比较慢，轮询判断
|
|
let times = 0
|
|
const inter = setInterval(() => {
|
|
if (window.totalHistoryDatas && window.totalHistoryDatas[properties.apiid]) {
|
|
this.filterHistoryData(thingCodeArr, dataPointArr, properties.apiid, normalData.renderIntervalEnabled);
|
|
this.setHtml(this.rootEl);
|
|
clearInterval(inter);
|
|
}
|
|
if (times > 20) {
|
|
clearInterval(inter)
|
|
}
|
|
times++;
|
|
}, 1000)
|
|
}
|
|
initRender();
|
|
|
|
let inters = parseInt(renderInterval || '300000')
|
|
if (normalData && !normalData.renderIntervalEnabled) {
|
|
inters = 1000
|
|
}
|
|
setInterval(() => {
|
|
if (window.totalHistoryDatas[properties.apiid]) {
|
|
this.filterHistoryData(thingCodeArr, dataPointArr, properties.apiid, normalData.renderIntervalEnabled);
|
|
this.setHtml(this.rootEl);
|
|
}
|
|
}, inters)
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
if (this.shouldUpdate()) {
|
|
this.updateHtmlDebounced();
|
|
}
|
|
}
|
|
}
|
|
|
|
class CustomLineChartModel 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: 'custom-line-chart',
|
|
view: CustomLineChartNode,
|
|
model: CustomLineChartModel,
|
|
})`,css:`.custom-line-chart svg {\r
|
|
stroke: none;\r
|
|
}`,fakeData:""},m={id:e,name:a,aliasName:t,image:n,imageType:i,groupName:l,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:d,files:r};export{t as aliasName,d as config,m as default,r as files,l as groupName,o as groupType,e as id,n as image,i as imageType,p as isDefault,u as isRemote,a as name,s as sectionType};
|