strategy-panel 1.0.0

package/es/common/graph-common/category-type.js

@@ -0,0 +1,72 @@
+import { COMPONENTS_TYPE, COMMONLY_USED, SCENE_DISPLAY, SIGN_OPERATION, MOTION_OPERATION } from "./node-types";
+export var componentsData = [{
+  id: COMPONENTS_TYPE.COMMONLY_USED,
+  name: '通用组件',
+  isDir: true,
+  children: [{
+    id: COMMONLY_USED.VARIATE,
+    name: '变量',
+    imgUrl: require("../../assets/variate.svg")
+  }]
+}, {
+  id: COMPONENTS_TYPE.SCENE_DISPLAY,
+  name: '场景触发',
+  isDir: true,
+  children: [{
+    id: SCENE_DISPLAY.EQUIPMENT,
+    name: '设备触发',
+    imgUrl: require("../../assets/decive.svg"),
+    number: 1
+  }, {
+    id: SCENE_DISPLAY.TIME,
+    name: '时间触发',
+    imgUrl: require("../../assets/time.svg")
+  }, {
+    id: SCENE_DISPLAY.MANUAL,
+    name: '手动按钮',
+    imgUrl: require("../../assets/hand.svg")
+  }]
+}, {
+  id: COMPONENTS_TYPE.SIGN_OPERATION,
+  name: '运算符号',
+  isDir: true,
+  children: [{
+    id: SIGN_OPERATION.RELATION,
+    name: '关系运算',
+    imgUrl: require("../../assets/relation.svg")
+  }, {
+    id: SIGN_OPERATION.LOGICAL,
+    name: '逻辑运算',
+    imgUrl: require("../../assets/logical.svg")
+  }, {
+    id: SIGN_OPERATION.CONDITION,
+    name: '条件判断',
+    imgUrl: require("../../assets/condition.svg")
+  }]
+}, {
+  id: COMPONENTS_TYPE.MOTION_OPERATION,
+  name: '运动符号',
+  isDir: true,
+  children: [{
+    id: MOTION_OPERATION.ALARM,
+    name: '报警',
+    imgUrl: require("../../assets/alarm.svg")
+  }, {
+    id: MOTION_OPERATION.NOTICE,
+    name: '通知',
+    imgUrl: require("../../assets/notice.svg")
+  }, {
+    id: MOTION_OPERATION.ORDER,
+    name: '派发工单',
+    imgUrl: require("../../assets/order.svg")
+  }, {
+    id: MOTION_OPERATION.CONTROL,
+    name: '远程控制',
+    imgUrl: require("../../assets/control.svg")
+  }]
+}, {
+  id: COMPONENTS_TYPE.APPLICATION,
+  name: '应用组件',
+  isDir: true,
+  children: []
+}];

package/es/common/graph-common/connector/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/common/graph-common/connector/index.js

@@ -0,0 +1,14 @@
+import { Graph } from '@antv/x6';
+Graph.registerConnector('pai', function (s, t) {
+  var offset = 4;
+  var control = 80;
+  var v1 = {
+    x: s.x,
+    y: s.y + offset + control
+  };
+  var v2 = {
+    x: t.x,
+    y: t.y - offset - control
+  };
+  return "M ".concat(s.x, " ").concat(s.y, "\n       L ").concat(s.x, " ").concat(s.y + offset, "\n       C ").concat(v1.x, " ").concat(v1.y, " ").concat(v2.x, " ").concat(v2.y, " ").concat(t.x, " ").concat(t.y - offset, "\n       L ").concat(t.x, " ").concat(t.y, "\n      ");
+}, true);

package/es/common/graph-common/node-element/common-element.less

@@ -0,0 +1,117 @@
+@node-element-primary-color: #00A6FF;
+
+.x6-node [magnet='true'] {
+  cursor: crosshair;
+  transition: none;
+}
+
+.x6-node [magnet='true']:hover {
+  opacity: 1;
+}
+
+.x6-node [magnet='true'][port-group='in'] {
+  cursor: move;
+  stroke: none;
+}
+
+.x6-port-body > span {
+  display: block;
+}
+
+.ais-port {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #00A6FF;
+  border-radius: 100%;
+  background: #fff;
+  display: block;
+}
+
+.ais-port.connected {
+  width: 0;
+  height: 0;
+  margin-top: 3px;
+  margin-left: -1px;
+  border-width: 5px 4px 0;
+  border-style: solid;
+  border-color: #00A6FF transparent transparent;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.x6-port-body.available {
+  overflow: visible;
+}
+
+.x6-port-body.available body {
+  overflow: visible;
+}
+.x6-port-body.available span {
+  overflow: visible;
+  display: block;
+}
+
+.x6-port-body.available body > span::before {
+  content: ' ';
+  float: left;
+  width: 20px;
+  height: 20px;
+  margin-top: -6px;
+  margin-left: -6px;
+  border-radius: 50%;
+  background-color: fade(@node-element-primary-color, 60%);
+  box-sizing: border-box;
+}
+
+.x6-port-body.available body > span::after {
+  content: ' ';
+  float: left;
+  clear: both;
+  width: 10px;
+  height: 10px;
+  margin-top: -15px;
+  margin-left: -1px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid @node-element-primary-color;
+  // position: relative;
+  z-index: 10;
+  box-sizing: border-box;
+  // transform: translateZ(0);
+  // position: relative
+}
+
+.x6-port-body.adsorbed {
+  overflow: visible;
+}
+
+.x6-port-body.adsorbed body {
+  overflow: visible;
+}
+
+.x6-port-body.adsorbed body > span::before {
+  content: ' ';
+  float: left;
+  width: 28px;
+  height: 28px;
+  margin-top: -9px;
+  margin-left: -10px;
+  border-radius: 50%;
+  background-color: fade(@node-element-primary-color, 60%);
+  box-sizing: border-box;
+}
+
+.x6-port-body.adsorbed body > span::after {
+  content: ' ';
+  float: left;
+  clear: both;
+  width: 10px;
+  height: 10px;
+  margin-top: -19px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid @node-element-primary-color;
+  // position: relative;
+  z-index: 10;
+  box-sizing: border-box;
+}

package/es/common/graph-common/node-element/condition-element.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Node } from '@antv/x6';
+import './condition-element.less';
+interface Props {
+    node?: Node;
+}
+declare const ConditionElement: React.FC<Props>;
+export default ConditionElement;

package/es/common/graph-common/node-element/condition-element.js

@@ -0,0 +1,35 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import React from 'react';
+import classNames from 'classnames';
+import { ANT_PREFIX } from "../../constants/global";
+import { NodePopover } from "../node-popover";
+import { ReactSVG } from 'react-svg';
+import "./condition-element.less";
+
+var ConditionElement = function ConditionElement(props) {
+  var node = props.node;
+  var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
+  var name = data.name,
+      selected = data.selected,
+      imgUrl = data.imgUrl;
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: ANT_PREFIX
+  }, /*#__PURE__*/React.createElement(NodePopover, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: classNames('node-rhombus-element', {
+      selected: !!selected
+    })
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    src: require("../../../assets/rhombus.svg"),
+    className: classNames('node-rhombus-element-bg')
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "rhombus-inner"
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    src: imgUrl,
+    className: "icon"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "name"
+  }, name))))));
+};
+
+export default ConditionElement;

package/es/common/graph-common/node-element/condition-element.less

@@ -0,0 +1,82 @@
+@import "./common-element.less";
+
+@node-element-primary-color: #00A6FF;
+@condition-element-width: 260px;
+@condition-element-height: 107px;
+@condition-element-name-max-width: 144px;
+
+
+
+.node-rhombus-element {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  width: @condition-element-width;
+  height: @condition-element-height;
+  overflow: hidden;
+  //
+  //background-color: fade(@node-element-primary-color, 20%);
+  //border: 1px solid @node-element-primary-color;
+
+  & .node-rhombus-element-bg{
+    position: absolute;
+    z-index: -1;
+    div{
+      width: @condition-element-width;
+      height: @condition-element-height;
+      svg path {
+        width: @condition-element-width;
+        height: @condition-element-height;
+        fill: fade(@node-element-primary-color, 20%);
+        stroke: @node-element-primary-color
+      }
+    }
+  }
+
+
+  & .rhombus-inner{
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.selected,
+  &:hover {
+    .node-rhombus-element-bg{
+      svg path {
+        fill: @node-element-primary-color;
+      }
+    }
+    .icon {
+      svg path {
+        fill: #fff;
+      }
+    }
+    .name {
+      color: #ffffff;
+    }
+  }
+  .icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 12px;
+    svg {
+      width: 20px;
+      height: 20px;
+      path {
+        fill: @node-element-primary-color;
+      }
+    }
+  }
+
+  .name {
+    overflow-x: hidden;
+    color: @node-element-primary-color;
+    //font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    max-width: @condition-element-name-max-width;
+  }
+}

package/es/common/graph-common/node-element/logical-element.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Node } from '@antv/x6';
+import './logical-element.less';
+interface Props {
+    node?: Node;
+}
+declare const ConditionElement: React.FC<Props>;
+export default ConditionElement;

package/es/common/graph-common/node-element/logical-element.js

@@ -0,0 +1,34 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import React from 'react';
+import classNames from 'classnames';
+import { ANT_PREFIX } from "../../constants/global";
+import { NodePopover } from "../node-popover";
+import { ReactSVG } from 'react-svg';
+import "./logical-element.less";
+var operatorUrl = {
+  '|': require("../../../assets/OR.svg"),
+  '&': require("../../../assets/AND.svg"),
+  '^': require("../../../assets/XOR.svg")
+};
+
+var ConditionElement = function ConditionElement(props) {
+  var node = props.node;
+  var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
+  var selected = data.selected,
+      imgUrl = data.imgUrl,
+      nodeData = data.nodeData;
+  var operator = nodeData === null || nodeData === void 0 ? void 0 : nodeData.operator;
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: ANT_PREFIX
+  }, /*#__PURE__*/React.createElement(NodePopover, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames('logical-element', {
+      selected: !!selected
+    })
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    src: operator ? (operatorUrl === null || operatorUrl === void 0 ? void 0 : operatorUrl[operator]) || imgUrl : imgUrl,
+    className: "icon"
+  }))));
+};
+
+export default ConditionElement;

package/es/common/graph-common/node-element/logical-element.less

@@ -0,0 +1,54 @@
+@import "./common-element.less";
+
+
+@node-element-primary-color: #00A6FF;
+@logical-bg-edg: 50px;
+@logical-edg: 30px;
+
+.logical-element {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: @logical-bg-edg;
+  height: @logical-bg-edg;
+  overflow: hidden;
+  background-color: fade(@node-element-primary-color, 20%);
+  border: 1px solid @node-element-primary-color;
+  border-radius: 4px;
+
+  &.selected,
+  &:hover {
+    background-color: @node-element-primary-color;
+    .icon {
+      svg path {
+        fill: #fff;
+      }
+    }
+    .name {
+      color: #ffffff;
+    }
+  }
+  .icon {
+    width: @logical-edg;
+    height: @logical-edg;
+    svg {
+      width: @logical-edg;
+      height: @logical-edg;
+      path {
+        fill: @node-element-primary-color;
+      }
+    }
+  }
+
+  .name {
+    overflow-x: hidden;
+    color: @node-element-primary-color;
+    //font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+}
+
+

package/es/common/graph-common/node-element/node-element.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Node } from '@antv/x6';
+import './node-element.less';
+interface Props {
+    node?: Node;
+}
+export declare const NodeElement: React.FC<Props>;
+export {};

package/es/common/graph-common/node-element/node-element.js

@@ -0,0 +1,27 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import React from 'react';
+import classNames from 'classnames';
+import { ANT_PREFIX } from "../../constants/global";
+import { NodePopover } from "../node-popover";
+import { ReactSVG } from 'react-svg';
+import "./node-element.less";
+export var NodeElement = function NodeElement(props) {
+  var node = props.node;
+  var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
+  var name = data.name,
+      selected = data.selected,
+      imgUrl = data.imgUrl;
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: ANT_PREFIX
+  }, /*#__PURE__*/React.createElement(NodePopover, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames('node-element', {
+      selected: !!selected
+    })
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    src: imgUrl,
+    className: "icon"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "name"
+  }, name))));
+};

package/es/common/graph-common/node-element/node-element.less

@@ -0,0 +1,48 @@
+@import "./common-element.less";
+
+.node-element {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 180px;
+  height: 43px;
+  overflow: hidden;
+  background-color: fade(@node-element-primary-color, 20%);
+  border: 1px solid @node-element-primary-color;
+  border-radius: 4px;
+
+  &.selected,
+  &:hover {
+    background-color: @node-element-primary-color;
+    .icon {
+      svg path {
+        fill: #fff;
+      }
+    }
+    .name {
+      color: #ffffff;
+    }
+  }
+  .icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 12px;
+    svg {
+      width: 20px;
+      height: 20px;
+      path {
+        fill: @node-element-primary-color;
+      }
+    }
+  }
+
+  .name {
+    overflow-x: hidden;
+    color: @node-element-primary-color;
+    //font-size: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+}

package/es/common/graph-common/node-element/node-group.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import GroupNode from '@/common/graph-common/shape/nodes/GroupNode';
+interface Props {
+    experimentId: string;
+    node?: GroupNode;
+}
+export declare const NodeGroup: React.FC<Props>;
+export {};