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.
703 lines
60 KiB
703 lines
60 KiB
const e="e74e3f4e-d737-4440-88ca-b1adaaa97d4d",n="custom-progress-guage",t="进度仪表图",a='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695784641645" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6357" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 260.266667l42.666667 262.4c0 21.333333-19.2 36.266667-42.666667 36.266666s-42.666667-17.066667-42.666667-36.266666" fill="#4C64FE" p-id="6358"></path><path d="M488.533333 85.333333C264.533333 98.133333 85.333333 285.866667 85.333333 509.866667c0 155.733333 81.066667 290.133333 204.8 364.8 23.466667 14.933333 51.2-2.133333 51.2-29.866667V832c0-14.933333-6.4-29.866667-19.2-38.4-34.133333-23.466667-64-51.2-87.466666-85.333333 23.466667-8.533333 36.266667-34.133333 27.733333-57.6-8.533333-25.6-34.133333-38.4-59.733333-32l-12.8 6.4c-14.933333-40.533333-21.333333-85.333333-19.2-132.266667 2.133333-32 8.533333-64 19.2-91.733333 10.666667 8.533333 27.733333 10.666667 42.666666 6.4 25.6-8.533333 38.4-34.133333 32-59.733334-4.266667-14.933333-17.066667-25.6-29.866666-29.866666 53.333333-76.8 136.533333-130.133333 232.533333-142.933334 0 4.266667 0 8.533333 2.133333 12.8 8.533333 25.6 34.133333 38.4 59.733334 32 19.2-6.4 32-23.466667 34.133333-44.8 98.133333 12.8 183.466667 70.4 236.8 149.333334-14.933333 12.8-23.466667 32-17.066667 51.2 8.533333 23.466667 32 38.4 57.6 32 10.666667 32 17.066667 68.266667 17.066667 104.533333 0 40.533333-6.4 76.8-19.2 113.066667-10.666667-6.4-25.6-10.666667-40.533333-6.4-25.6 8.533333-38.4 34.133333-32 59.733333 4.266667 14.933333 14.933333 23.466667 27.733333 29.866667-23.466667 34.133333-55.466667 64-89.6 87.466666-12.8 8.533333-19.2 21.333333-19.2 36.266667v12.8c0 27.733333 29.866667 44.8 55.466667 29.866667 121.6-74.666667 200.533333-209.066667 200.533333-362.666667C938.666667 268.8 733.866667 72.533333 488.533333 85.333333z" fill="#4C64FE" opacity=".6" p-id="6359"></path><path d="M661.333333 142.933333c0-19.2-12.8-36.266667-29.866666-40.533333-44.8-12.8-93.866667-19.2-142.933334-17.066667C264.533333 98.133333 85.333333 285.866667 85.333333 509.866667c0 155.733333 81.066667 290.133333 204.8 364.8 23.466667 14.933333 51.2-2.133333 51.2-29.866667V832c0-14.933333-6.4-29.866667-19.2-38.4-34.133333-23.466667-64-51.2-87.466666-85.333333-34.133333-40.533333-44.8-83.2-44.8-83.2-14.933333-40.533333-21.333333-85.333333-19.2-132.266667 2.133333-32 8.533333-64 19.2-91.733333 0 0 8.533333-40.533333 44.8-83.2 53.333333-76.8 136.533333-130.133333 232.533333-142.933334 0 0 49.066667-10.666667 96 0 14.933333 2.133333 29.866667 4.266667 44.8 8.533334 27.733333 8.533333 53.333333-10.666667 53.333333-40.533334z" fill="#4C64FE" p-id="6360"></path></svg>',i="svg",l="动态",o="图表组件",u=!1,c=!0,d="时间",s=`{"type":"page","id":"u:270584784ce1","name":"page1","asideResizor":false,"style":{"boxShadow":" 0px 0px 0px 0px transparent"},"pullRefresh":{"disabled":true},"body":[{"type":"tabs","name":"tab","tabs":[{"title":"样式","icon":"fa fa-th-large","body":[{"type":"form","title":"","name":"basicPropForm","body":[{"type":"input-text","label":"名称","name":"nodeAlias","id":"u:6b126f0520cb","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"input-text","label":"ID ","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":"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":[],"id":"u:5fafefdb95b3","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-number","label":"结束角度","name":"range.endAngle","id":"u:ba7437e94ec2","mode":"horizontal","size":"full","value":0,"keyboard":true,"step":1,"inputClassName":"w-full"},{"type":"input-number","label":"开始角度","name":"range.startAngle","id":"u:c0774249b76c","mode":"horizontal","size":"full","keyboard":true,"step":1,"value":180,"inputClassName":"w-full"}],"id":"u:ce7604a06386"}],"id":"u:d5f5d7d1f821","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-number","label":"最低值","name":"range.min","id":"u:26039411388d","mode":"horizontal","size":"full","keyboard":true,"step":1,"value":0,"inputClassName":"w-full"},{"type":"input-number","label":"分割数量","name":"range.splitNumber","id":"u:a5b3389d2a59","mode":"horizontal","size":"full","keyboard":true,"step":1,"value":12,"inputClassName":"w-full"},{"type":"input-number","label":"最大值","name":"range.max","id":"u:54a0ef638b7d","mode":"horizontal","size":"full","value":240,"keyboard":true,"step":1,"inputClassName":"w-full"},{"type":"input-number","label":"告警值","name":"range.warnValue","id":"u:a30f76b9e7d1","mode":"horizontal","size":"full","value":240,"keyboard":true,"step":1,"inputClassName":"w-full"}],"id":"u:f02a179a6a50"}],"id":"u:aa3c4bbe6aa5","className":"m-b"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"data":{"range":{}}},{"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":"itemStyle.color","id":"u:570bce4701ea","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full"}],"id":"u:3b84bfb2ac84"}],"id":"u:47c4b60e2f0a"}],"id":"u:26e7e01f73a1"}],"id":"u:1f93884d7cab"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:94fc9c2c1ee3","data":{"itemStyle":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:5634ef10b528","title":"指针","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"id":"u:877cbeb25bde","type":"switch","label":"显示","option":"","name":"pointer.show","falseValue":false,"trueValue":true,"value":false,"mode":"horizontal"}],"id":"u:c902dbef0b74"},{"body":[{"type":"input-number","label":"宽度","name":"pointer.width","keyboard":true,"id":"u:53456d1d1c24","step":1,"mode":"horizontal"}],"id":"u:8720741678e0"}],"id":"u:d6376bca6bb8","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-text","label":"长度","name":"pointer.length","id":"u:7de9bfcda3b3","mode":"horizontal"}],"id":"u:7852c90f0a49"}],"id":"u:ca49688783d6","className":"m-b"},{"type":"input-text","label":"指针图标","name":"pointer.icon","id":"u:919f2a4901d5","mode":"horizontal"},{"type":"input-color","label":"指针颜色","name":"pointer.itemStyle.color","id":"u:a21662d6cc40","format":"hex","mode":"horizontal","inputClassName":"w-full"}],"id":"u:cfdcf4ef7c28"}],"id":"u:bb12fb4471be"}],"id":"u:770e9b54fe82"}],"id":"u:313e202f2c59"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:5dcb1482e7d7","data":{"pointer":{}}}],"bodyClassName":""}],"bodyClassName":"m-b","headingClassName":""},{"type":"fieldset","id":"u:907187f7e2a1","title":"轴线","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"axisLine.show","falseValue":false,"trueValue":true,"id":"u:66db89183c8d","value":false,"mode":"horizontal"}],"id":"u:0f88558b09bc"},{"body":[{"type":"switch","label":"圆帽头","option":"","name":"axisLine.roundCap","falseValue":false,"trueValue":true,"id":"u:1e9e200d0253","value":false,"mode":"horizontal"}],"id":"u:4a6c1060216a"}],"id":"u:61782c2ddf57"},{"type":"fieldset","id":"u:118aba12cec1","title":"轴线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"input-number","label":"宽度","name":"axisLine.lineStyle.width","keyboard":true,"id":"u:a3f9ac129227","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"combo","id":"u:3ea1bf97482c","label":"颜色","name":"axisLine.lineStyle.color","multiple":true,"addable":true,"removable":true,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:7075032bb6da"},"items":[{"type":"input-text","name":"ratio","placeholder":"文本","id":"u:d9626e780c85"},{"type":"input-color","name":"color","placeholder":"颜色","id":"u:04cbb808bdec","format":"rgba"}]},{"type":"grid","columns":[],"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":"轴刻度","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"axisTick.show","falseValue":false,"trueValue":true,"id":"u:3ae45d99e549","value":false,"mode":"horizontal"}],"id":"u:6cccb24a07b1"},{"body":[{"type":"input-number","label":"分割数量","name":"axisTick.splitNumber","keyboard":true,"id":"u:667148843726","step":1,"mode":"horizontal"}],"id":"u:9d90409718c4"}],"id":"u:262da10ce695"},{"type":"fieldset","id":"u:0fd48ddb098a","title":"轴刻度风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"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:a1e52778791f","title":"轴分割线","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","id":"u:bb778b2ab45b","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"splitLine.show","falseValue":false,"trueValue":true,"id":"u:566019456d8a","value":false,"mode":"horizontal"}],"id":"u:e63b8ab8c1b7"},{"body":[{"type":"input-number","label":"分割线长度","name":"splitLine.length","keyboard":true,"id":"u:88c01a074d74","step":1,"mode":"horizontal"}],"id":"u:81c6d7e1b3c6"}]},{"type":"input-number","label":"分割线距离","name":"splitLine.distance","keyboard":true,"id":"u:27f4095831fa","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"fieldset","id":"u:66c502dea7a7","title":"轴分割线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[],"id":"u:af693bef6c01"},{"type":"input-color","id":"u:3a618618dae0","label":"颜色","name":"splitLine.lineStyle.color","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:f46d328a3f22"},{"body":[{"type":"input-number","label":"宽度","name":"splitLine.lineStyle.width","keyboard":true,"id":"u:a3ee7bf1223d","step":1,"mode":"horizontal"}],"id":"u:309b42de5f47"}],"id":"u:7c58df9998ec","className":"m-b"}],"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":""},{"type":"fieldset","id":"u:12b7317e6ea6","title":"轴标签","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","id":"u:73d49b751235","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"axisLabel.show","falseValue":false,"trueValue":true,"id":"u:c114899e1e4c","value":false,"mode":"horizontal"},{"type":"grid","columns":[],"id":"u:25c988d6559f"}],"id":"u:03524a342eb1"},{"body":[{"type":"input-number","label":"轴标签距离","name":"axisLabel.distance","keyboard":true,"id":"u:a4cca1d898e4","step":1,"mode":"horizontal"}],"id":"u:3db7aab96aa6"}]},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"axisLabel.color","id":"u:174767c36fb8","format":"rgba","mode":"horizontal"}],"id":"u:85d0631a988b"},{"body":[{"type":"input-number","label":"字体大小","name":"axisLabel.fontSize","keyboard":true,"id":"u:aeba820770b6","step":1,"mode":"horizontal"}],"id":"u:dddd48e64703"}],"id":"u:17f0a56de9e2"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:fa350f5071bd","data":{"axisLabel":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:790d9c0150ed","title":"标题","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","id":"u:ebdf6c980e14","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"title.show","falseValue":false,"trueValue":true,"id":"u:92104d9bafa0","value":false,"mode":"horizontal"},{"type":"grid","columns":[],"id":"u:392f8b101c0e"}],"id":"u:d942d217921b"}]},{"type":"grid","columns":[{"body":[{"type":"input-number","label":"字体大小","name":"title.fontSize","keyboard":true,"id":"u:dec5404b85b8","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"颜色","name":"title.color","id":"u:8577cf2abdd3","format":"rgba","mode":"horizontal","inputClassName":"w-full m-b"}],"id":"u:10f31e0344a5"}],"id":"u:2ee20d63a615"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:6a4800e0bbe2","data":{"title":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:f585c61a8237","title":"值","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","id":"u:c6c36f8c0d07","columns":[]},{"type":"grid","columns":[{"body":[{"type":"input-number","label":"字体大小","name":"valueConfig.fontSize","keyboard":true,"id":"u:e0def39e9dff","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"select","label":"字重","name":"valueConfig.fontWeight","options":[{"label":"普通","value":"normal"},{"label":"加粗","value":"bold"},{"label":"更粗","value":"bolder"},{"label":"细体","value":"lighter"}],"id":"u:703715f9624d","multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"颜色","name":"valueConfig.color","id":"u:4ddbe6f3a357","format":"rgba","mode":"horizontal","inputClassName":"w-full m-b"}],"id":"u:63b4e650350b"}],"id":"u:86e16bb8e6ad"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:d4beaacf1e42","data":{"valueConfig":{}}},{"type":"switch","label":"换行","option":"","name":"nextNewLine","falseValue":false,"trueValue":true,"id":"u:d21fea9f9afa","value":false,"mode":"horizontal"}],"bodyClassName":""},{"type":"fieldset","id":"u:4287dc2288d2","title":"单位","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","id":"u:ae12e0e5d9ed","columns":[]},{"type":"grid","columns":[{"body":[{"type":"input-number","label":"字体大小","name":"unit.fontSize","keyboard":true,"id":"u:6fb5d369d34f","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"select","label":"字重","name":"unit.fontWeight","options":[{"label":"普通","value":"normal"},{"label":"加粗","value":"bold"},{"label":"更粗","value":"bolder"},{"label":"细体","value":"lighter"}],"id":"u:5db0259b31e3","multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"颜色","name":"unit.color","id":"u:8972ef3c0429","format":"rgba","mode":"horizontal","inputClassName":"w-full m-b"}],"id":"u:38b83b3bc510"}],"id":"u:e753d12193ad"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:309c1f76cdd2","data":{"unit":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:d732b1c33e43","title":"内层进度圈","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","id":"u:395e938603d8","columns":[]},{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"innerCircleLine.show","falseValue":false,"trueValue":true,"id":"u:090acedb4234","value":false,"mode":"horizontal","inputClassName":""},{"type":"input-color","label":"颜色","name":"innerCircleLine.color","id":"u:0fa374df138e","format":"rgba","mode":"horizontal","inputClassName":"w-full"}],"id":"u:75f23953d6be"}],"id":"u:b86cf797918c"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:3b8dc146b388","data":{"outerCircleLine":{}}}],"bodyClassName":"m-b"},{"type":"fieldset","id":"u:e644f071f6ce","title":"内圆","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","id":"u:4b8134972e81","columns":[]},{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"innerCircle.show","falseValue":false,"trueValue":true,"id":"u:0a7100c4490e","value":false,"mode":"horizontal","inputClassName":""},{"type":"input-color","label":"边框颜色","name":"innerCircle.borderColor","id":"u:c4ba5f0f4948","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"背景","name":"innerCircle.backColor","id":"u:5eefec5fc669","format":"rgba","className":"m-b","mode":"horizontal","inputClassName":"w-full"}],"id":"u:1efe07e3fe42"}],"id":"u:15aa19c98874"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:7bd5359cad3a","data":{"outerCircleLine":{}}}],"bodyClassName":"m-b"},{"type":"fieldset","id":"u:2f1a4289c9fc","title":"外层进度圈","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","id":"u:01a3d4683a42","columns":[]},{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"outerCircleLine.show","falseValue":false,"trueValue":true,"id":"u:cb366a1223d5","value":false,"mode":"horizontal","inputClassName":""},{"type":"input-color","label":"颜色","name":"outerCircleLine.color","id":"u:1527b2252cea","format":"rgba","mode":"horizontal","inputClassName":"w-full"}],"id":"u:c93910dbc1f4"}],"id":"u:cf8c972c48d2"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:fc9cf28e4e2d","data":{"outerCircleLine":{}}}],"bodyClassName":"m-b"},{"type":"fieldset","title":"代码配置","collapsable":true,"body":[{"type":"editor","label":"function (option, datas) {","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}],"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"}],"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": "2d10edaf-edb8-40ef-927b-bf4fee5718a4",
|
|
"type": "custom-progress-guage",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "2d10edaf-edb8-40ef-927b-bf4fee5718a4",
|
|
"width": 200,
|
|
"height": 200,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"opacity": 1,
|
|
"grid": {
|
|
"show": false
|
|
},
|
|
"range": {
|
|
"endAngle": -270,
|
|
"startAngle": 90,
|
|
"min": 0,
|
|
"splitNumber": 12,
|
|
"max": 240,
|
|
"warnValue": 1000
|
|
},
|
|
"pointer": {
|
|
"show": false,
|
|
"itemStyle": {
|
|
"color": "#b8e986"
|
|
}
|
|
},
|
|
"axisLine": {
|
|
"show": false,
|
|
"roundCap": false,
|
|
"lineStyle": {
|
|
"color": [
|
|
{
|
|
"ratio": "0",
|
|
"color": "#00FFFF"
|
|
},
|
|
{
|
|
"ratio": "1",
|
|
"color": "rgba(80, 227, 194, 1)"
|
|
}
|
|
],
|
|
"width": 2
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
"splitLine": {
|
|
"show": true,
|
|
"length": 12,
|
|
"lineStyle": {
|
|
"color": "rgba(80, 227, 194, 1)",
|
|
"width": 1
|
|
},
|
|
"distance": 0
|
|
},
|
|
"axisLabel": {
|
|
"show": false
|
|
},
|
|
"title": {
|
|
"show": true,
|
|
"color": ""
|
|
},
|
|
"nextNewLine": false,
|
|
"innerCircleLine": {
|
|
"show": false,
|
|
"color": "#0CD3DB",
|
|
"backColor": "rgba(0,255,255,0.05)"
|
|
},
|
|
"innerCircle": {
|
|
"show": true,
|
|
"borderColor": "rgba(80, 227, 194, 1)",
|
|
"backColor": "rgba(0,255,255,0.05)"
|
|
},
|
|
"outerCircleLine": {
|
|
"show": true,
|
|
"color": "rgba(80, 227, 194, 1)"
|
|
},
|
|
"codeConfig": "return option",
|
|
"progress": {
|
|
"show": false,
|
|
"roundCap": false
|
|
},
|
|
"nodeAlias": "进度仪表图",
|
|
"showDefaultValue": false,
|
|
"showUnit": false,
|
|
"fontSize": 0,
|
|
"itemStyle": {
|
|
"color": "rgba(80, 227, 194, 1)"
|
|
},
|
|
"unit": {
|
|
"fontSize": 12,
|
|
"color": "rgba(80, 227, 194, 1)"
|
|
},
|
|
"valueConfig": {
|
|
"color": "rgba(80, 227, 194, 1)",
|
|
"fontSize": 14
|
|
},
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": "",
|
|
"unit": ""
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,javascript:`const { createApp, createVNode, render } = Vue;
|
|
const app = createApp({})
|
|
|
|
const defaultVal = 50
|
|
|
|
// 获取圆上面某点的坐标(x0, y0表示坐标，r半径，angle角度)
|
|
function getCirlPoint(x0, y0, r, angle) {
|
|
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
|
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
|
return {
|
|
x: x1,
|
|
y: y1
|
|
}
|
|
}
|
|
|
|
|
|
const ProgressGauge = {
|
|
template: '<div :id="chartId" :style="getStyle"></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: {
|
|
getStyle() {
|
|
return {
|
|
width: \`\${this.width}px\`,
|
|
height: \`\${this.height}px\`
|
|
}
|
|
}
|
|
},
|
|
setup(props) {
|
|
const { onMounted, nextTick, toRefs, watch } = Vue;
|
|
const { chartProps, currentData, thingName, attr, width, height } = toRefs(props);
|
|
|
|
let intervalInst = null;
|
|
let myChart = null;
|
|
const initChart = (data, pros) => {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
const dom = document.getElementById(props.chartId);
|
|
if (dom) {
|
|
if (!myChart) {
|
|
myChart = echarts.init(dom);
|
|
}
|
|
// 由于实时推送时候不会重复创建实例，但是需更新画布大小。
|
|
myChart.resize({
|
|
width: width.value,
|
|
height: height.value,
|
|
})
|
|
if (data != null) {
|
|
const { grid, codeConfig, range, progress, pointer, axisLine, axisTick, splitLine, nextNewLine,
|
|
axisLabel, itemStyle, title, valueConfig, unit, outerCircleLine, innerCircleLine, innerCircle } = pros;
|
|
// 指定图表的配置项和数据
|
|
|
|
// 轴线底色拼装
|
|
// 发现图表一直渲染的情况。就要注意图表数据多层对象嵌套的引用问题。
|
|
const newAxisLine = window._.cloneDeep(axisLine);
|
|
const Colors = []
|
|
const oldColor = newAxisLine.lineStyle.color
|
|
if (oldColor && oldColor.length > 0) {
|
|
oldColor.forEach((item) => {
|
|
Colors.push([item.ratio, item.color])
|
|
})
|
|
newAxisLine.lineStyle.color = Colors;
|
|
} else if (oldColor && oldColor.length === 0) {
|
|
delete newAxisLine.lineStyle.color
|
|
}
|
|
|
|
|
|
let angle = 0;//角度，用来做简单的动画效果的
|
|
let biggerDigit = +data > 10000
|
|
let value = biggerDigit ? (+data/10000).toFixed(2) : +data.toFixed(2);
|
|
const valueColor = valueConfig && (valueConfig.color || title.color);
|
|
const valueSize = valueConfig && (valueConfig.fontSize || title.fontSize);
|
|
const valueWeight = valueConfig && (valueConfig.fontWeight || 'normal');
|
|
const unitColor = unit && (unit.color || title.color);
|
|
const unitSize = unit && (unit.fontSize || title.fontSize);
|
|
const unitWeight = unit && (unit.fontWeight || 'normal');
|
|
const textFormat = nextNewLine ? '{a|' + value + (biggerDigit ? '万' : '') + '}\\r\\n{c|' + props.unit + '}' : '{a|' + value + '}{c|' + props.unit + '}';
|
|
const isWarning = (value || 0) > range.warnValue;
|
|
splitLine.lineStyle.color = isWarning ? "#A59136" : splitLine.lineStyle.color;
|
|
var option = {
|
|
grid,
|
|
title: {
|
|
...title,
|
|
text: textFormat,
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: valueSize,
|
|
color: isWarning ? "#F0D048" : valueColor,
|
|
fontWeight: valueWeight,
|
|
align: 'center'
|
|
},
|
|
|
|
c: {
|
|
fontSize: unitSize,
|
|
color: isWarning ? "#F0D048" : unitColor,
|
|
fontWeight: unitWeight,
|
|
align: 'center'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'innerProgressCircle',
|
|
type: 'pie',
|
|
radius: ['83%', '70%'],
|
|
silent: true,
|
|
startAngle: 90,
|
|
z: 0,
|
|
zlevel: 0,
|
|
label: {
|
|
normal: {
|
|
position: "center",
|
|
|
|
}
|
|
},
|
|
data: [{
|
|
value: value,
|
|
name: "",
|
|
itemStyle: {
|
|
normal: {
|
|
color: { // 完成的圆环的颜色
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: isWarning ? "#F0D048" : newAxisLine.lineStyle.color[0][1] // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: isWarning ? "#F0D048" : newAxisLine.lineStyle.color[1][1] // 100% 处的颜色
|
|
}]
|
|
},
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: range.max - value,
|
|
name: "",
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "transparent"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: "progressGuage",
|
|
type: "gauge",
|
|
radius: "83%",
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
center: ['50%', '50%'],
|
|
...range,
|
|
progress,
|
|
pointer,
|
|
axisLine: newAxisLine,
|
|
axisTick,
|
|
splitLine,
|
|
axisLabel,
|
|
itemStyle,
|
|
hoverAnimation: true,
|
|
detail: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
value: value,
|
|
name: ""
|
|
}]
|
|
},
|
|
|
|
]
|
|
};
|
|
|
|
if (outerCircleLine.show) {
|
|
option.series.push({
|
|
type: 'pie',
|
|
name: 'outerCircleLine',
|
|
radius: ['95%', '90%'],
|
|
hoverAnimation: false,
|
|
itemStyle: {
|
|
normal: {
|
|
color: isWarning ? "#A59136" : outerCircleLine.color
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [100]
|
|
})
|
|
}
|
|
|
|
if (innerCircleLine.show) {
|
|
option.series.push(...[
|
|
{
|
|
name: "ring5",
|
|
type: 'custom',
|
|
coordinateSystem: "none",
|
|
renderItem: function (params, api) {
|
|
return {
|
|
type: 'arc',
|
|
shape: {
|
|
cx: api.getWidth() / 2,
|
|
cy: api.getHeight() / 2,
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.83,
|
|
startAngle: (0 + angle) * Math.PI / 180,
|
|
endAngle: (90 + angle) * Math.PI / 180
|
|
},
|
|
style: {
|
|
stroke: isWarning ? "#A59136" : innerCircleLine.color,
|
|
fill: "transparent",
|
|
lineWidth: 1.5
|
|
},
|
|
silent: true
|
|
};
|
|
},
|
|
data: [0]
|
|
}, {
|
|
name: "ring5",
|
|
type: 'custom',
|
|
coordinateSystem: "none",
|
|
renderItem: function (params, api) {
|
|
return {
|
|
type: 'arc',
|
|
shape: {
|
|
cx: api.getWidth() / 2,
|
|
cy: api.getHeight() / 2,
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.83,
|
|
startAngle: (180 + angle) * Math.PI / 180,
|
|
endAngle: (270 + angle) * Math.PI / 180
|
|
},
|
|
style: {
|
|
stroke: isWarning ? "#A59136" : innerCircleLine.color,
|
|
fill: "transparent",
|
|
lineWidth: 1.5
|
|
},
|
|
silent: true
|
|
};
|
|
},
|
|
data: [0]
|
|
}, {
|
|
name: "ring5",
|
|
type: 'custom',
|
|
coordinateSystem: "none",
|
|
renderItem: function (params, api) {
|
|
return {
|
|
type: 'arc',
|
|
shape: {
|
|
cx: api.getWidth() / 2,
|
|
cy: api.getHeight() / 2,
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.83,
|
|
startAngle: (270 + -angle) * Math.PI / 180,
|
|
endAngle: (40 + -angle) * Math.PI / 180
|
|
},
|
|
style: {
|
|
stroke: isWarning ? "#A59136" : innerCircleLine.color,
|
|
fill: "transparent",
|
|
lineWidth: 1.5
|
|
},
|
|
silent: true
|
|
};
|
|
},
|
|
data: [0]
|
|
}, {
|
|
name: "ring5",
|
|
type: 'custom',
|
|
coordinateSystem: "none",
|
|
renderItem: function (params, api) {
|
|
return {
|
|
type: 'arc',
|
|
shape: {
|
|
cx: api.getWidth() / 2,
|
|
cy: api.getHeight() / 2,
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.83,
|
|
startAngle: (90 + -angle) * Math.PI / 180,
|
|
endAngle: (220 + -angle) * Math.PI / 180
|
|
},
|
|
style: {
|
|
stroke: isWarning ? "#A59136" : innerCircleLine.color,
|
|
fill: "transparent",
|
|
lineWidth: 1.5
|
|
},
|
|
silent: true
|
|
};
|
|
},
|
|
data: [0]
|
|
}, {
|
|
name: "ring5",
|
|
type: 'custom',
|
|
coordinateSystem: "none",
|
|
renderItem: function (params, api) {
|
|
let x0 = api.getWidth() / 2;
|
|
let y0 = api.getHeight() / 2;
|
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.83;
|
|
let point = getCirlPoint(x0, y0, r, (90 + -angle))
|
|
return {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: point.x,
|
|
cy: point.y,
|
|
r: 4
|
|
},
|
|
style: {
|
|
stroke: isWarning ? "#A59136" : innerCircleLine.color,
|
|
fill: "#0CD3DB"
|
|
},
|
|
silent: true
|
|
};
|
|
},
|
|
data: [0]
|
|
}, {
|
|
name: "ring5", //绿点
|
|
type: 'custom',
|
|
coordinateSystem: "none",
|
|
renderItem: function (params, api) {
|
|
let x0 = api.getWidth() / 2;
|
|
let y0 = api.getHeight() / 2;
|
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.83;
|
|
let point = getCirlPoint(x0, y0, r, (270 + -angle))
|
|
return {
|
|
type: 'circle',
|
|
shape: {
|
|
cx: point.x,
|
|
cy: point.y,
|
|
r: 4
|
|
},
|
|
style: {
|
|
stroke: isWarning ? "#A59136" : innerCircleLine.color, //绿
|
|
fill: innerCircleLine.color,
|
|
},
|
|
silent: true
|
|
};
|
|
},
|
|
data: [0]
|
|
}
|
|
])
|
|
}
|
|
|
|
if (innerCircle.show) {
|
|
option.series.push({
|
|
type: 'pie',
|
|
name: 'innerCircle',
|
|
radius: [0, '83%'],
|
|
hoverAnimation: false,
|
|
animation: false,
|
|
itemStyle: {
|
|
normal: {
|
|
shadowBlur: 20,
|
|
shadowColor: '#000',
|
|
color: isWarning ? "transparent" : innerCircle.backColor,
|
|
borderWidth: 1,
|
|
borderColor: isWarning ? "#A59136" : innerCircle.borderColor
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [100]
|
|
})
|
|
}
|
|
|
|
const func = new Function('option', 'datas', codeConfig);
|
|
const opt = func(window._.cloneDeep(option), data);
|
|
|
|
|
|
// console.log('opt', opt);
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(opt);
|
|
|
|
function draw() {
|
|
angle = angle + 3
|
|
myChart.setOption(opt, true)
|
|
//window.requestAnimationFrame(draw);
|
|
}
|
|
if (intervalInst) {
|
|
clearInterval(intervalInst);
|
|
}
|
|
intervalInst = setInterval(function () {
|
|
//用setInterval做动画感觉有问题
|
|
draw()
|
|
}, 100);
|
|
}
|
|
}
|
|
}
|
|
|
|
watch([currentData, chartProps], ([val, pros]) => {
|
|
nextTick(() => {
|
|
initChart(val, pros)
|
|
})
|
|
}, {
|
|
immediate: true,
|
|
deep: true,
|
|
})
|
|
}
|
|
}
|
|
|
|
class CustomProgressGuageNode 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: \`gauge-\${properties.id}\`,
|
|
currentData: this.realValue,
|
|
width,
|
|
height,
|
|
chartProps: properties,
|
|
thingName,
|
|
attr,
|
|
unit: normalData.unit || 'km/h'
|
|
})
|
|
return
|
|
}
|
|
const el = document.createElement('div');
|
|
rootEl.innerHTML = '';
|
|
const instance = createVNode(ProgressGauge, {
|
|
name: properties.nodeAlias,
|
|
chartId: \`gauge-\${properties.id}\`,
|
|
currentData: this.realValue,
|
|
width,
|
|
height,
|
|
chartProps: properties,
|
|
thingName,
|
|
attr,
|
|
unit: normalData.unit || 'km/h'
|
|
})
|
|
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 CustomProgressGaugeModel 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-progress-guage',
|
|
view: CustomProgressGuageNode,
|
|
model: CustomProgressGaugeModel,
|
|
})`,css:"",fakeData:""},p={id:e,name:n,aliasName:t,image:a,imageType:i,groupName:l,groupType:o,isRemote:!1,isDefault:!0,sectionType:d,config:s,files:r};export{t as aliasName,s as config,p as default,r as files,l as groupName,o as groupType,e as id,a as image,i as imageType,c as isDefault,u as isRemote,n as name,d as sectionType};
|