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

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

### 绘制示例
<tuopu-baseTopu6/>
### 源码

::: details 设备--派生类
<<< @/docs/.vuepress/components/tuopu/items/equipment.ts
:::
::: details 设备--状态圆类
<<< @/docs/.vuepress/components/tuopu/items/SCircleItem.ts
:::
::: details 工厂类
<<< @/docs/.vuepress/components/tuopu/items/topuFactory.ts
:::

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

### 源码解析
1. 根据项目需求对设备名称做相应展示并提供状态点；所以为设备新增相关方法
::: details equipment.ts核心代码
```js
 // 设置设备名称
    setEquipName() {
        const item = new STextItem(this);
        item.text = this.data.properties.localName;
        // item.strokeColor = new SColor('#6b7086');
        item.color = new SColor('#6b7086')
        item.font = new SFont("sans-serif", 16);
        item.isTransform = false;
        // item.font = new SFont("sans-serif", 16);
        item.moveTo(-this.width / 2, this.height / 2 +16 );
        this.setStatusPoint(item)
    }
     /**
     * 设置状态点
     *
     * @param parent 父类
     */
    setStatusPoint(parent: STextItem | null) {
        const item = new SCircleItem(parent);
        const h = parent ? parent.height : 0
        item.localtion = new SPoint(0, 0);
        item.radius = 4;
        item.fillColor = new SColor('#de6466');
        item.strokeColor = new SColor('#de6466')
        item.moveTo(-item.radius * 2, h)
        this.StatusPoint = item;
    }

    /**
     * 设置状态远点颜色
     *
     * @param val 颜色字符
     */
    setStatusPointColor(val: string) {
        if (!this.StatusPoint) return;
        this.StatusPoint.fillColor = new SColor(val);
        this.StatusPoint.strokeColor = new SColor(val);
    }
```
:::
2. 派生设备类写好后在工厂类对设备类进行替换
::: details topuFactory.ts调整得demo
```js
// 引入设备
import { EquipItem } from "./equipment"
   /*
    * 创建基础设备
    *
    * @param data     数据
    * @return 注释
    */
    createBaseSEquipment(data: Legend): EquipItem {
        const item = new EquipItem(null);
        ......
```
:::
3. 引用
::: details demo.vue需要调整得demo
```js
// 引入工厂类
import { topuFactory } from "./items/topuFactory";
// 解析器替换工厂类 其他流程不变
   const parse = new PTopoParser();
   parse.factory = new topuFactory();
```
:::