persagy-web-doc/docs/guides/tuopuInsert/deriveeq.md

派生--管道类

在应用中对设备常常会儿定制化处理。面对这种需求、引擎管线基类已经对基础得方法属性做了相关得暴露、 开发同事只需要更具需求对相关类做相应的派生即可。

::: details 目录 [[toc]] :::

绘制示例

源码

::: details 管道--派生类 <<< @/docs/.vuepress/components/tuopu/items/pipe.ts :::

::: details 工厂类 <<< @/docs/.vuepress/components/tuopu/items/topuFactory1.ts :::

::: details vue组件源码 <<< @/docs/.vuepress/components/tuopu/baseTopu7.vue :::

源码解析

1. 对管道样式做相应得优化 ::: details pipe.ts核心代码

   constructor(parent: SGraphItem | null, pointList: any) {
       super(parent)
       this.pointList = pointList;
       // 底部默认的管道
       this.pipe_default = new SCircleCornerPolylineItem(this, pointList)
       // 管道上部的流动像素
       this.pipe_flow = new SCircleCornerPolylineItem(this, pointList)
   
       this.flowFillColor = new SColor('#ffffff');    //内管颜色
       this.flowStrokeColor = new SColor('#ffffff'); // 内管颜色
       this.flowLineStyle = SLineStyle.Dashed;  //线型
       this.pipe_default.widthIsPx = true; //显示像素宽
       this.pipe_flow.widthIsPx = true; //像素宽
       this.showScroll = true; //是否滚动
   }
   

   :::

2. 派生设备类写好后在工厂类对设备类进行替换 ::: details topuFactory.ts调整得demo ```js // 引入设备 import { Pipe } from "./pipe.ts" /*

   • 创建基础管道 *
   • @param data 数据
   • @return 注释 */ createBasePipe(data: Relation): Pipe { const setPointList = data.pointList.map((i: any) => { return new SPoint(i.x, i.y) }); ...... ``` :::

3. 引用 ::: details demo.vue需要调整得demo

   // 引入工厂类
   import { topuFactory } from "./items/topuFactory1";
   // 解析器替换工厂类 其他流程不变
   const parse = new PTopoParser();
   parse.factory = new topuFactory();
   

   :::