物管理前端
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.

239 lines
67 KiB

  1. const e="113bb94a-870d-42a7-8133-17634dd8015d",a="custom-actor-node",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="1687767926285" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27332" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 181.333333c29.866667 0 53.333333-23.466667 53.333333-53.333333S541.866667 74.666667 512 74.666667 458.666667 98.133333 458.666667 128s23.466667 53.333333 53.333333 53.333333z m0-85.333333c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32-32-14.933333-32-32 14.933333-32 32-32zM776.533333 401.066667l8.533334-21.333334-262.4-87.466666v-4.266667h-21.333334v4.266667l-262.4 87.466666 8.533334 21.333334 253.866666-85.333334v228.266667l-177.066666 356.266667 19.2 10.666666L512 571.733333l168.533333 339.2 19.2-10.666666-177.066666-356.266667V315.733333z" fill="#707070" p-id="27333"></path></svg>',l="svg",i="基础",o="基础图形",r=!1,u=!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&nbsp;&nbsp;&nbsp;&nbsp;","name":"id","id":"u:6232710ac003","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"grid","id":"u:1954dc15dd5b","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","keyboard":true,"id":"u:656efdb758ad","step":1,"suffix":"px","placeholder":"组件宽度","size":"full","mode":"horizontal","className":"m-b","value":100,"labelClassName":"w-8","labelAlign":"left","precision":2,"inputClassName":"w-full"}],"id":"u:4274c47a4ef5","md":6},{"body":[{"type":"input-number","label":"高度","name":"height","keyboard":true,"id":"u:1ed6dcd98c1a","step":1,"suffix":"px","placeholder":"组件高度","size":"full","mode":"horizontal","className":"m-b","value":100,"labelAlign":"left","labelClassName":"w-8","precision":2,"inputClassName":"w-full"}],"id":"u:3e9d1e71a69f","md":6}]},{"type":"grid","id":"u:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","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":"Y 轴","name":"y","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: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":[{"body":[{"type":"input-color","label":"填充","name":"fill","id":"u:0d19ed3e2bdc","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id"
  2. "nodes": [
  3. {
  4. "id": "7ced8c7f-d9ec-45ab-8e85-cf5eb9ea03ea",
  5. "type": "custom-actor-node",
  6. "x": 200,
  7. "y": 200,
  8. "text": {
  9. "value": "",
  10. "x": 200,
  11. "y": 200
  12. },
  13. "properties": {
  14. "id": "7ced8c7f-d9ec-45ab-8e85-cf5eb9ea03ea",
  15. "width": 100,
  16. "height": 100,
  17. "x": 200,
  18. "y": 200,
  19. "rotation": 0,
  20. "opacity": 1,
  21. "strokeWidth": 1,
  22. "showDefaultValue": false,
  23. "showUnit": false,
  24. "fontSize": 12,
  25. "nodeAlias": "人物",
  26. "lineHeight": 12,
  27. "fontStyle": "bold,italic,underline,line-through",
  28. "dynamic": {
  29. "normalData": {
  30. "dataPoint": "",
  31. "compareType": "",
  32. "conditionVariables": [],
  33. "defaultValue": "[{ \\"val\\": 0.00 }]",
  34. "unit": ""
  35. },
  36. "eventsData": {
  37. "eventCombo": [
  38. {
  39. "eventType": "click",
  40. "enable": false,
  41. "config": "{\\"globalInputParamsCalculated\\":[],\\"device\\":\\"\\",\\"command\\":\\"\\",\\"eventAction\\":\\"sendCommand\\",\\"dataPointParamsCalculate\\":\\"return [\\\\n {\\\\n key: \\\\\\"\\\\\\",\\\\n value: ''\\\\n }\\\\n]\\",\\"sendCommandMethod\\":\\"config\\",\\"inputParamsCalculate\\":\\"// console.log('deviceInfo', deviceInfo, 'command', command, 'event', event);\\\\n// 入参提示: deviceInfo -- 设备信息,command -- 指令信息, event -- 事件传参(当前部件所绑定的立即值,或当前部件经过计算后的自定义值), 入参计算。。。然后返回出参\\\\nconst condition = {\\\\n deviceName: deviceInfo.code,\\\\n attrCode: command.controlDeviceAttr,\\\\n value: event == 0 ? 1 : event == 1 ? 0 : event\\\\n}\\\\nreturn {\\\\n \\\\\\"condition\\\\\\": JSON.stringify(condition),\\\\n \\\\\\"controlId\\\\\\": command.id\\\\n}\\",\\"requestMethod\\":\\"post\\",\\"requestUrl\\":\\"/thing/device/control/control\\"}"
  42. },
  43. {
  44. "eventType": "dblClick",
  45. "enable": false,
  46. "config": ""
  47. }
  48. ]
  49. },
  50. "uiData": {
  51. "dataPoint": "",
  52. "compareType": "",
  53. "conditionVariables": []
  54. },
  55. "animationData": {
  56. "animationCombo": [
  57. {
  58. "min": "",
  59. "max": "",
  60. "animationName": "旋转",
  61. "animationTime": 3
  62. }
  63. ]
  64. },
  65. "hiddenData": {
  66. "hiddenCombo": [
  67. {
  68. "dataPoint": "",
  69. "min": "",
  70. "max": "",
  71. "showOrHiddenName": "隐藏"
  72. }
  73. ]
  74. }
  75. }
  76. }
  77. }
  78. ]
  79. }`,javascript:`// 人物
  80. class ActorModel extends RectResize.model {
  81. realValue = ''
  82. initNodeData(data) {
  83. super.initNodeData(data)
  84. const { properties } = this;
  85. this.width = properties.width || 100;
  86. this.height = properties.height || 100;
  87. this.text.editable = false; // 不允许文本被编辑
  88. window.nodeEventsListeners(this);
  89. }
  90. setAttributes() {
  91. const { x, y, properties } = this;
  92. const { textHorizontalMove = 0, textVerticalMove = 0, dynamic } = properties;
  93. const { normalData } = dynamic || {};
  94. let textValue = properties.content || '';
  95. if (normalData) {
  96. const { defaultValue } = normalData || {}
  97. const realValue = window.resolveScadaNewValue(defaultValue)
  98. this.realValue = realValue
  99. const { showDefaultValue, showUnit } = properties
  100. if(showDefaultValue) {
  101. textValue += ' ' + realValue
  102. }
  103. if (showUnit) {
  104. textValue += ' ' + normalData.unit
  105. }
  106. }
  107. this.text = {
  108. ...this.text,
  109. x: x + textHorizontalMove,
  110. y: y + textVerticalMove,
  111. value: textValue,
  112. }
  113. }
  114. getNodeStyle() {
  115. const style = super.getNodeStyle();
  116. const { properties } = this;
  117. style.fill = properties.fill || style.fill;
  118. window.changeBackgroundColor(style, properties);
  119. style.stroke = properties.strokeColor || style.stroke;
  120. style.strokeWidth = properties.strokeWidth || style.strokeWidth;
  121. style.opacity = properties.opacity || 1;
  122. return style;
  123. }
  124. getTextStyle() {
  125. const style = super.getTextStyle();
  126. const { properties } = this;
  127. style.color = properties.fontColor || style.color;
  128. style.fontSize = properties.fontSize || style.fontSize;
  129. const fontStyle = properties.fontStyle;
  130. if(fontStyle) {
  131. if (fontStyle.includes('bold')) {
  132. style.fontWeight = 'bolder';
  133. }
  134. if(fontStyle.includes('italic')) {
  135. style.fontStyle = 'italic'
  136. }
  137. if (fontStyle.includes('underline,line-through')) {
  138. style.textDecoration = 'underline line-through'
  139. } else if (fontStyle.includes('line-through,underline')) {
  140. style.textDecoration = 'line-through underline'
  141. } else if (fontStyle.includes('underline')) {
  142. style.textDecoration = 'underline'
  143. } else if (fontStyle.includes('line-through')) {
  144. style.textDecoration = 'line-through'
  145. }
  146. }
  147. style.fill = properties.fill || style.fill;
  148. window.changeFontColor(style, properties);
  149. return style;
  150. }
  151. getResizeOutlineStyle() {
  152. return {
  153. stroke: "#00ffff",
  154. strokeWidth: 1,
  155. strokeDasharray: "none",
  156. };
  157. }
  158. }
  159. class ActorView extends RectResize.view {
  160. getResizeShape() {
  161. const { x, y, width, height } = this.props.model
  162. const style = this.props.model.getNodeStyle()
  163. // 人物头部圆形
  164. const ellipseAttrs = {
  165. ...style,
  166. cx: x,
  167. cy: y - 3/8 * height,
  168. rx: 1/4 * width,
  169. ry: 1/8 * height,
  170. width,
  171. height
  172. }
  173. // 人物肩膀横线
  174. const pathAAttrs = {
  175. ...style,
  176. d: \`M \${x - 1/2 * width} \${y - 1/8 * height} L \${x + 1/2 * width} \${y - 1/8 * height}\`
  177. }
  178. // 人物身体躯干竖线
  179. const pathBAttrs = {
  180. ...style,
  181. d: \`M \${x} \${y - 1/4 * height} L \${x} \${y + 1/5 * height}\`
  182. }
  183. // 人物左腿斜线
  184. const pathCAttrs = {
  185. ...style,
  186. d: \`M \${x} \${y + 1/5 * height} L \${x - 1/2 * width} \${y + 1/2 * height}\`
  187. }
  188. // 人物右腿斜线
  189. const pathDAttrs = {
  190. ...style,
  191. d: \`M \${x} \${y + 1/5 * height} L \${x + 1/2 * width} \${y + 1/2 * height}\`
  192. }
  193. // 人物透明背景板
  194. const bgAttrs = {
  195. x: x - 1/5 * width,
  196. y: y - 1/2 * height,
  197. width: 2/5 * width,
  198. height,
  199. style: 'fill: transparent'
  200. }
  201. return h('g', {}, [
  202. h('ellipse', {
  203. ...ellipseAttrs,
  204. }),
  205. h('path', {
  206. ...pathAAttrs,
  207. }),
  208. h('path', {
  209. ...pathBAttrs
  210. }),
  211. h('path', {
  212. ...pathCAttrs
  213. }),
  214. h('path', {
  215. ...pathDAttrs
  216. }),
  217. h('rect', {
  218. ...bgAttrs
  219. })
  220. ]
  221. );
  222. }
  223. }
  224. lf.register({
  225. type: 'custom-actor-node',
  226. view: ActorView,
  227. model: ActorModel
  228. })`,css:""},m={id:e,name:a,aliasName:t,image:n,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:d,config:s,files:c};export{t as aliasName,s as config,m as default,c as files,i as groupName,o as groupType,e as id,n as image,l as imageType,u as isDefault,r as isRemote,a as name,d as sectionType};