易通 econdraw Web 组态软件，方便组件化模块化工程化引入 组态内部弹窗使用 element-ui 组件,要使用内部弹窗需要安装 element-ui
npm install --save econdrawimport econdraw from "econdraw";
import "econdraw/dist/index.css";
Vue.use(econdraw);<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/econdraw/dist/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/econdraw/dist/index.umd.min.js"></script>在 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);
}
}
}
}| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| graph | 图纸字符 | string | - | — |
| originData | 原始数据 | array | - | — |
| pushData | 更新数据 | array | - | — |
| control | 控制按钮 | object | - | — |
| fitView | 加载完图纸自动适应画布大小 | boolean | - | false |
| alarmData | 报警数据 | array | - | [] |
| permission | 权限 | array | - | [] |
| defaultPageId | 默认要显示的页面 Id | string | - | - |
graph: json 数据使用 JSON.stringify(data)转为 string
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 = [
{
TagName: "Project.Dev.Point",
TagValue: 0,
},
{
TagName: "Project.Dev.Point2",
TagValue: 0,
},
{
TagName: "Project.Dev.Point3",
TagValue: 0,
},
];pushData = [
{
TagValue: 5,
TagName: "Project.Dev.Point",
},
];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_1','Permission_2','Permission_3',...,'Permission_32']| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| event | 组件触发事件 | 当前组件的全部属性, 触发的事件 |
| 事件名称 | 说明 |
|---|---|
| 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
}
}
}{
type: "click", //click: 单击事件, dblclick:双击事件, mouserover: 鼠标移入, mouseout: 鼠标移出
action: "",// dialog: 打开弹窗,control: 控制下发, link: 打开链接, page: 打开页面, custom: 自定义
value: "value",
name: "name",
}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;