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

派生--设备

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

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

绘制示例

源码

::: 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

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

   :::