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

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

### 绘制示例
<tuopu-baseTopu7/>

### 源码

::: 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核心代码
```js
  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
```js
// 引入工厂类
import { topuFactory } from "./items/topuFactory1";
// 解析器替换工厂类 其他流程不变
   const parse = new PTopoParser();
   parse.factory = new topuFactory();
```
:::