使用方式

1. 安装 sketch-vue3-1.0.0.tgz 包

可以使用本地安装,或是npm服务器远程安装 本地安装: 请在本项目中 npm build npm pack 获得.tgz的打包文件

在你的vue3前端项目中: npm install sketch-vue3-1.0.0.tgz npm远程安装: 在你的vue3前端项目中: npm install sketch-vue3

2. 添加到你的组件中,并添加样式

<DrawingPage v-if="showDrawingPage" :Events="[setData,saveData]" />

import 'sketch-vue3/style.css'

3. 定义函数

setData() {
  return this.data;
},
saveData(data) {
  console.log("获得的结果:" + data)
}

当前仅支持以上两个函数:

1. setData为配置获取函数, 请实现它的逻辑并返回工程图配置数据,DrawingPage会自动加载
2. saveData为保存数据 ,在工图界面中点击保存后,会调用你定义的saveData并将数据返回给你

4. 新增加载表具数据参数

请在查询到当前用户的表具信息后,在data中添加如下参数

data:{
  "AddParams4NewSys":{
    {表号}:{
      "cardNo":{卡号},
      "meterType":{表型},
      "meterGasnums":{总购气量},
      "meterBalance":{余额},
      "meterTotal":{总购金额}
    }
  }
}

5. 为支持不使用vue3的前端项目,本项目支持其他部署方式

1. nginx-1.23.2-sketch为静态资源nginx服务器
2. sketch_vue3_test为包含入口界面的部署工程,build后将生成资源导入到nginx-1.23.2-sketch\sketch即可运行
3. 此种调用方式采用iframe引入界面,postMessage进行通信,需要install axios,具体例子参考sketch_vue3_test\src\sketchtest\App.vue