易通 econdraw

易通 econdraw Web 组态软件，方便组件化模块化工程化引入 组态内部弹窗使用 element-ui 组件,要使用内部弹窗需要安装 element-ui

易通组态官网

易通官网

更新日志

npm 安装

 npm install --save econdraw

注册

import econdraw from "econdraw";
import "econdraw/dist/index.css";

Vue.use(econdraw);

CDN 在线引入

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/econdraw/dist/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/econdraw/dist/index.umd.min.js"></script>

CDN 注册

在 main.js

Vue.component(econdraw.name, econdraw);

或者 在vue文件中使用

components: {
    econDraw: econdraw
  },

使用

<econDraw
  v-if="graphFlag"
  ref="econDraw"
  :control="control"
  :fitView="fitView"
  :graph="graphData"
  :pushData="pushData"
  :originData="originData"
  :alarmData="alarmData"
  :permission="permission"
  :defaultPageId="defaultPageId"
  @event="handleClick"
></econDraw>

export default {
  data() {
    return {
      graphFlag: false,
      control:{
          show: true,
          background: '#fff',
          grabColor: '#409eff',
          position: 'bottom-right',
          color: '#666'
        }
      graphData: '',
      originData: [
        {
          TagName: 'Project.Dev.Point',
          TagValue: 0
        },
        {
          TagName: 'Project.Dev.Point2',
          TagValue: 0
        },
        {
          TagName: 'Project.Dev.Point3',
          TagValue: 0
        }
      ]
      pushData: [
        {
          TagName: 'Project.Dev.Point1',
          TagValue: 0
        }
      ],
      fitView: false,
      alarmData: [],
      permission: [],
      defaultPageId: '',
    }
  },
  mounted() {
    this.getGraphData()
  },
  methods: {
    getGraphData () {
      this.graphFlag = true
      this.graphData = '图纸数据'
    },
    handleClick(data, object) {
      // data 当前图元的全部数据
      // object 当前动作的数据
        console.log(data,object);
      }
    }
  }
}

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | -------------------------- | ------- | ------ | ------ | | graph | 图纸字符 | string | - | — | | originData | 原始数据 | array | - | — | | pushData | 更新数据 | array | - | — | | control | 控制按钮 | object | - | — | | fitView | 加载完图纸自动适应画布大小 | boolean | - | false | | alarmData | 报警数据 | array | - | [] | | permission | 权限 | array | - | [] | | defaultPageId | 默认要显示的页面 Id | string | - | - |

graph: json 数据使用 JSON.stringify(data)转为 string

control

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | -------------- | ------- | ------------------------------------------------- | ------------ | | show | 控制按钮显示 | Boolean | - | false | | gird | 按钮排列方向 | String | row 横排 | 竖排 | | grabColor | 拖拽模式切换箱 | String | - | #409eff | | background | 控制按钮背景 | string | - | #fff | | color | 控制按钮颜色 | string | - | #ccc | | position | 控制按钮位置 | string | top-left / top-right / bottom-left / bottom-right | bottom-right |

originData 格式

originData = [
  {
    TagName: "Project.Dev.Point",
    TagValue: 0,
  },
  {
    TagName: "Project.Dev.Point2",
    TagValue: 0,
  },
  {
    TagName: "Project.Dev.Point3",
    TagValue: 0,
  },
];

pushData 格式

pushData = [
  {
    TagValue: 5,
    TagName: "Project.Dev.Point",
  },
];

alarmData 格式

alarmData = [
  {
    DevName: "电表1",
    PointName: "Ia",
    AlarmLevelText: "严重",
    Rule: "报警规则",
    LastAlarmTime: "2023-08-08 09:05:05",
  },
  {
    DevName: "电表2",
    PointName: "Ib",
    AlarmLevelText: "一般",
    Rule: "电流超限",
    LastAlarmTime: "2023-08-06 19:15:25",
  },
];

permission 格式

permission = ['Permission_1','Permission_2','Permission_3',...,'Permission_32']

event

| 事件名称 | 说明 | 回调参数 | | -------- | ------------ | ------------------------------ | | event | 组件触发事件 | 当前组件的全部属性, 触发的事件 |

自定义控制按钮事件$ref

| 事件名称 | 说明 | | ---------------- | -------- | | hnadleZoomIn | 放大 | | handleZoomOut | 缩小 | | handleFitView | 适应窗口 | | handleFullScreen | 全屏 |

<econDraw
  ref="econDraw"
  @event="handleClick"
  @getComponents="handleGetComponents"
></econDraw>

export default {
  methods: {
    customFunction () {
      // 加载json图纸完成,执行一次 handleFitView
      this.$refs['econDraw'].hnadleZoomIn() //放大
      this.$refs['econDraw'].handleZoomOut() //缩小

      this.$refs['econDraw'].handleFitView() //适应窗口
      this.$refs['econDraw'].handleFullScreen() //全屏
      this.$refs['econDraw'].handleRender()// 重新render
      // 外层div包围盒宽高改变需要执行 handlefitBounding 方法
      // this.$refs['econDraw'].handlefitBounding()// 适应外面的包围盒
    },
    handleClick(data, object) {
      // data 当前图元的全部数据
      // object 当前动作的数据
        console.log(data,object);
      }
    },
    handleGetComponents(components) {
      components[0].set('fill', 'red') //给第一个组件设置 填充红色
      this.$refs['econDraw'].handleRender()//属性修改需要执行 handleRender
    }
  }
}

handleClick object 数据

{
  type: "click", //click: 单击事件, dblclick:双击事件, mouserover: 鼠标移入, mouseout: 鼠标移出
  action: "",// dialog: 打开弹窗,control: 控制下发, link: 打开链接,  page: 打开页面, custom: 自定义
  value: "value",
  name: "name",
}

handleClick data 属性

angle: 0;
backgroundColor: "";
customEvents: [];
fill: "rgba(80, 227, 194, 1)";
fillRule: "nonzero";
flipX: false;
flipY: false;
globalCompositeOperation: "source-over";
height: 40;
id: "m21aurd6";
left: 765.65;
opacity: 1;
originX: "center";
originY: "center";
paintFirst: "fill";
rx: "5";
ry: "5";
scaleX: 1;
scaleY: 1;
shadow: null;
skewX: 0;
skewY: 0;
stroke: "#000";
strokeDashArray: null;
strokeDashOffset: 0;
strokeLineCap: "butt";
strokeLineJoin: "miter";
strokeMiterLimit: 4;
strokeUniform: true;
strokeWidth: 1;
tag: "";
top: 386.01;
type: "ecRect";
version: "5.0.0";
visible: true;
width: 100;