大家知道，自动化行业很难离开组态，什么是组态?为了把生产企业各个环节的数据和流程以图的形式展示出来。画这个图的过程就是组态，画图所用的软件就是组态软件。

        其实呢，几乎每个实时库厂家都有自己的画图工具，比如PHD啊,PI啊。他们不仅有，而且还很强大。但是也都只适合自己的实时数据库。这样一来，市场上的画图工具就应运而生，C/S的,B/S的，都有。

      想想其实也简单，不就是把三角形，圆之类的图形，拖拽到一个页面并设置其颜色、大小、位置，组合成一张大图片，还有就是在这个页面绑定动态数据。理论上，也没什么难的。就这么分析了一下下，也想明白了大概怎么干。于是乎，动手，自己搞一个画图工具，vue3 + ts

说明一下，这个东西纯vue打造，看一下简单的代码

{"name": "topology","version": "1.0.0","private": true,"workspaces": ["packages/*"],"publishConfig": {"access": "public"},"scripts": {"start": "","build": "yarn workspaces run build","v": "lerna publish --skip-npm","docs": "typedoc --out ./docs packages"},"devDependencies": {"shx": "latest","lerna": "latest","typedoc": "latest","tslint": "latest","typescript": "latest","stats.js": "latest"}
}

画出图来，什么效果，如下，如下，如下

 可以画各种图，面板有各种工具，随便用

 还有图库里的各种元素，丰富多彩，各种各样。

钢铁是怎样练成的了？这个似乎不能回答，但是又不得不回答，所以自己写的代码怎么也得让大家看看。

import axios from 'axios';const instance = axios.create({baseURL: '/zt', // PRODUCTION ? '/zt' : '/api',timeout: 60000,
});export default instance;export async function uploadFile(file) {const data:FormData = new FormData();data.append('fileUpload', file);const result = await instance.post('upload', data, {timeout: 20000,});if (result.status === 200) {return new URL(result.data).pathname;}throw new Error(result.statusText);
}

代码其实只是个意思，不是全部，绑定后台数据代码也是必须有的，但是这个是分版本的。有java版本，也有C#版本，这样展示一下C#代码，说明一下大概是这个意思。就是下面这点意思，代码不多。不要说我不够意思，如果都给大家看，那就没意思了。

 [HttpPost][ActionName("toData")]public string toData([FromBody]FmData data){MFmData fm = new MFmData();fm.id = data.id;fm.name = data.name;fm.sysName = data.sysName;fm.facName = data.facName;fm.value = JsonHelper.JsonCompress(data.value);FmDataService db = new FmDataService();return db.CreateFmData(fm);}

说一千，道一万，都不如自己现场试试，小马过河，方知水深水浅。点点下面的链接，就能看到全部了。放心点好了，这里不是抖音，不用点赞，也没有粉丝团，随便点，随便看。

 http://103.228.204.22:8082/zt/#

走过，路过，不要错过。