edit:fix> 调整设备类

src/components/editClass/big-edit/SBaseEditScene.ts

@@ -176,6 +176,8 @@ export class SBaseEditScene extends SGraphEditScene {
     addEuqipment(event: SMouseEvent, legendObj: any): void {
 
         const data = {
+            /** id */
+            id: uuid(),
             /** 名称 */
             name: '基础设备',
             /** 返回物理世界对象 ID 列表 */

src/components/editClass/big-edit/items/SBaseEquipment copy.ts

@@ -0,0 +1,146 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SGraphItem, SAnchorItem } from "@persagy-web/graph/lib";
+import { Legend } from "./../types/Legend";
+import { SBaseIconTextEdit } from './../../edit/';
+
+/**
+ * 编辑基础设备类
+ *
+ * @author 韩耀龙 <han_yao_long@163.com>
+ */
+export class SBaseEquipment extends SBaseIconTextEdit {
+    /** 设备图例 */
+    _legendData: Legend | null = null;
+    set legendData(val) {
+        this._legendData = val;
+        this.initData()
+    }
+    get legendData(): Legend | null {
+        return this._legendData
+    }
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.legendData = data;
+    } // Constructor
+
+    /**
+     * 设置legendData 时 对 item 做设置
+     */
+    initData() {
+        if (!this.legendData) return;
+        if (this.legendData.size) {
+            this.sWidth = this.legendData.size.width;
+            this.sHeight = this.legendData.size.height;
+        }
+        // this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
+        if (this.legendData.anchorList && this.legendData.anchorList.length) {
+            this.anchorList = this.legendData.anchorList.map(t => {
+                let item = new SAnchorItem(this);
+                if (t.id) {
+                    item.id = t.id;
+                }
+                item.moveTo(t.pos.x, t.pos.y);
+                return item;
+            });
+        } else {
+            const anchorPoint = [
+                { x: this.img.x, y: this.img.y, id: "" },
+            ];
+            this.anchorList = anchorPoint.map(t => {
+                let item = new SAnchorItem(this);
+                if (t.id) {
+                    item.id = t.id;
+                }
+                item.moveTo(t.x, t.y);
+                return item;
+            });
+        }
+
+        this.showAnchor = false;
+        this.textItem.text = this.legendData.style.default.text || '';
+        this.textItem.font.size = this.legendData.style.default.font || 12;
+        this.img.url = this.legendData.style.default.url;
+        this.x = this.legendData.pos.x;
+        this.y = this.legendData.pos.y;
+        // 偏移二分之一文本高度
+        this.textItem.moveTo(
+            this.img.width * 0.5,
+            -(this.font.size * 1.25 * 0.5)
+        );
+        this.moveable = true;
+        this.selectable = true;
+    }// Function initData()
+
+    /**
+     * 返回对象储存的相关数据
+     *
+     * @return	对象储存的相关数据
+     */
+    toData(): any {
+        if (this.legendData) {
+            const list = this.anchorList.map((item) => {
+                return {
+                    id: item.id,
+                    pos: {
+                        x: this.x,
+                        y: this.y
+                    }
+                }
+            })
+            this.legendData.anchorList = list;
+            // 反馈大小
+            if (this.legendData.size) {
+                this.legendData.size.width = this.sWidth;
+                this.legendData.size.height = this.sHeight
+            } else {
+                this.legendData.size = {
+                    width: this.sWidth,
+                    height: this.sHeight
+                }
+            }
+            // 反馈文本
+            this.legendData.style.default.text = this.textItem.text ? this.textItem.text : '';
+            // 文本大小
+            this.legendData.style.default.font = this.font.size;
+            // 位置
+            this.legendData.pos = {
+                x: this.x,
+                y: this.y
+            };
+            return this.legendData
+        }
+    } // Function toData
+
+} // Class SBaseEquipment

src/components/editClass/big-edit/items/SBaseEquipment.ts

@@ -39,10 +39,20 @@ export class SBaseEquipment extends SBaseIconTextEdit {
     set legendData(val) {
         this._legendData = val;
         this.initData()
-    }
+    } // set legendData()
     get legendData(): Legend | null {
         return this._legendData
-    }
+    } // get legendData()
+
+    /** 信息点存储 */
+    _infoPointList: any[] = []
+    set infoPointList(val) {
+        this._infoPointList = val;
+    } // set infoPointList()
+    get infoPointList(): any[] {
+        return this._infoPointList
+    } // get infoPointList()
+
     /**
      * 构造函数
      *
@@ -86,6 +96,18 @@ export class SBaseEquipment extends SBaseIconTextEdit {
                 return item;
             });
         }
+        // 存储信息点
+        if (this.legendData.properties && this.legendData.properties.infoPointList) {
+            const infoPointList = this.legendData.properties.infoPointList
+            if (infoPointList.length) {
+                this.infoPointList = infoPointList
+            } else {
+                this.infoPointList = []
+            }
+        } else {
+            this.infoPointList = []
+        }
+
 
         this.showAnchor = false;
         this.textItem.text = this.legendData.style.default.text || '';
@@ -103,6 +125,43 @@ export class SBaseEquipment extends SBaseIconTextEdit {
     }// Function initData()
 
     /**
+     * 添加信息点
+     *
+     * @params	添加的信息点
+     */
+    addInfoMsg(val: any) {
+        this._infoPointList.push(val);
+        this.addTextItem(val)
+    }
+
+    /**
+     * 删除信息点
+     *
+     * @params	删除索引
+     */
+    removeInfoMsg(index: number) {
+        this._infoPointList.splice(index, 1);
+        this.removeTextItem()
+    }
+
+    /**
+     * 增加 textItem
+     *
+     * @params obj	textItem文本信息
+     */
+    addTextItem(val:any) {
+        // do something
+    }
+
+    /**
+     * 增加 textItem
+     *
+     * @params obj	textItem文本信息
+     */
+    removeTextItem(val:any) {
+        // do something
+    }
+    /**
      * 返回对象储存的相关数据
      *
      * @return	对象储存的相关数据

src/components/editClass/big-edit/until.ts

@@ -1,9 +1,20 @@
 //  生成uuid
+
 export function uuid() {
-  // do nothing
+  var s: any[] = [];
+  var hexDigits = "0123456789abcdef";
+  for (var i = 0; i < 36; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  s[14] = "4";
+  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+  s[8] = s[13] = s[18] = s[23] = "-";
+
+  var uuid = s.join("");
+  return `${uuid}-${new Date().getTime()}`;
 }
 
 export function rgbaNum(rgba: string) {
-    let val = rgba.match(/(\d(\.\d+)?)+/g);
-    return val;
+  let val = rgba.match(/(\d(\.\d+)?)+/g);
+  return val;
 }

src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -48,18 +48,13 @@
           <div class="imgUpdate">
             <div class="img-tit">设计图</div>
             <div class="btn-list">
-              <Button @click="tap" type="default">上传文件</Button>
+              <Button type="default">上传文件</Button>
             </div>
           </div>
           <div class="imgUpdate">
             <div class="img-tit">附加数据</div>
             <div class="textarea">
-              <el-input
-                type="textarea"
-                :rows="2"
-                placeholder="请输入内容"
-                v-model="textarea"
-              >
+              <el-input type="textarea" :rows="2" placeholder="请输入内容">
               </el-input>
             </div>
           </div>
@@ -72,8 +67,11 @@
             :width="200"
             iconType="search"
             placeholder="搜索信息点"
+            v-model="getPressMsg"
+            @pressEnter="pressEnter"
+            @clear="pressEnter"
           />
-          <div class="msgPoint-list">
+          <div class="msgPoint-list" v-show="!pressMsgData.length">
             <div class="type-list" v-for="(item, key) in msgData" :key="key">
               <div class="type-title" @click="clips(item)">
                 <i
@@ -87,13 +85,25 @@
               <el-collapse-transition>
                 <ul class="list" v-show="item.showChildren">
                   <li v-for="(a, b) in item.children" :key="'i' + b">
-                    <Checkbox :checked="checked1" @change="handleChange" />
+                    <Checkbox
+                      :checked="a.checked ? 'checked' : 'uncheck'"
+                      @change="changeCheck(a)"
+                    />
                     <p>{{ a.msgName }}</p>
                   </li>
                 </ul>
               </el-collapse-transition>
             </div>
           </div>
+          <ul class="msgPoint-list-press" v-show="pressMsgData.length">
+            <li v-for="(a, b) in pressMsgData" :key="b">
+              <Checkbox
+                :checked="a.checked ? 'checked' : 'uncheck'"
+                @change="changeCheck(a)"
+              />
+              <p>{{ a.msgName }}</p>
+            </li>
+          </ul>
         </div>
       </el-tab-pane>
     </el-tabs>
@@ -101,7 +111,9 @@
 </template>
 <script>
 import { msgData } from "./msgData.js";
+//
 export default {
+  props: ["InfoPointList", "EquipId"],
   data() {
     return {
       activeName: "first",
@@ -110,6 +122,8 @@ export default {
       checked1: "checked",
       isShow: true,
       msgData: [],
+      pressMsgData: [], // 搜索后得信息点数组
+      getPressMsg: "", //输入信息
     };
   },
   methods: {
@@ -123,47 +137,82 @@ export default {
     changeWidth() {},
     changeHeight() {},
     eforeAvatarUpload() {},
-    handleChange(v, obj) {
-      console.log(obj);
-      this.checked1 = v;
+    // 切换选中选项
+    changeCheck(item) {
+      item.checked = !item.checked;
     },
-  },
-  mounted() {
-    let arr = [];
-    msgData.forEach((item) => {
-      if (arr.length) {
-        let index = -1;
-        arr.forEach((aItem) => {
-          if (aItem.msgTypeId == item.msgTypeId) {
-            index = 1;
-            aItem.children.push(item);
-            aItem.number++;
+    // 搜索回车操作
+    pressEnter() {
+      const list = [];
+      if (!this.getPressMsg) {
+        this.pressMsgData = [];
+        return;
+      }
+      // 对信息点相同得提取出来
+      this.msgData.forEach((item) => {
+        item.children.forEach((a) => {
+          if (a.msgName.includes(this.getPressMsg)) {
+            list.push(a);
           }
         });
-        if (index == -1) {
-          let obj = {
-            msgTypeId: item.msgTypeId,
-            msgType: item.msgType,
-            children: [item],
-            number: 1,
-            showChildren: true,
-          };
-          arr.push(obj);
+      });
+      this.pressMsgData = list;
+    },
+  },
+  watch: {
+    EquipId(val) {
+      console.log("EquipId", val);
+      // 模拟接口
+      setTimeout(() => {
+        let arr = [];
+        // 勾选设备中选中的对象
+        if (this.InfoPointList && this.InfoPointList.length) {
+          msgData.map((item) => {
+            this.InfoPointList.forEach((a) => {
+              if (a.id == item.id) {
+                item.checked = true;
+              }
+            });
+            return item;
+          });
         }
-      } else {
-        let obj = {
-          msgTypeId: item.msgTypeId,
-          msgType: item.msgType,
-          children: [],
-          number: 1,
-          showChildren: true,
-        };
-        obj.children.push(item);
-        arr.push(obj);
-      }
-    });
-    this.msgData = arr;
-    console.log(this.msgData);
+        //  生成二级树
+        msgData.forEach((item) => {
+          if (arr.length) {
+            let index = -1;
+            arr.forEach((aItem) => {
+              if (aItem.msgTypeId == item.msgTypeId) {
+                index = 1;
+                aItem.children.push(item);
+                aItem.number++;
+              }
+            });
+            if (index == -1) {
+              let obj = {
+                msgTypeId: item.msgTypeId,
+                msgType: item.msgType,
+                children: [item],
+                number: 1,
+                showChildren: true,
+              };
+              arr.push(obj);
+            }
+          } else {
+            let obj = {
+              msgTypeId: item.msgTypeId,
+              msgType: item.msgType,
+              children: [],
+              number: 1,
+              showChildren: true,
+            };
+            obj.children.push(item);
+            arr.push(obj);
+          }
+        });
+        this.msgData = arr;
+        console.log('this.msgData',this.msgData )
+      }, 1000);
+    },
   },
 };
 </script>
@@ -245,6 +294,22 @@ p {
         }
       }
     }
+    .msgPoint-list-press {
+      margin-top: 12px;
+      li {
+        display: flex;
+        height: 40px;
+        align-items: center;
+        justify-content: flex-start;
+        cursor: pointer;
+        p {
+          margin-left: 12px;
+        }
+        &:hover {
+          background: #f5f6f7;
+        }
+      }
+    }
   }
   .caret-icon {
     animation: nowhirling 0.2s linear forwards;

src/components/editview/rightPropertyBar/msgData.js

@@ -3,36 +3,42 @@ export const msgData = [
         msgType: '即时状态',
         msgTypeId: 1,
         id: '001',
-        msgName: '001信息点'
+        msgName: '001信息点',
+        checked: false
     },
     {
         msgType: '即时状态',
         msgTypeId: 1,
         id: '002',
-        msgName: '002信息点'
+        msgName: '002信息点',
+        checked: false
     },
     {
         msgType: '即时状态',
         msgTypeId: 1,
         id: '003',
-        msgName: '003信息点'
+        msgName: '003信息点',
+        checked: false
     },
     {
         msgType: '累计指标',
         msgTypeId: 2,
         id: '004',
         msgName: '001信息点'
+        , checked: false
     },
     {
         msgType: '累计指标',
         msgTypeId: 2,
         id: '005',
         msgName: '002信息点'
+        , checked: false
     },
     {
         msgType: '累计指标',
         msgTypeId: 2,
         id: '006',
         msgName: '003信息点'
+        , checked: false
     }
 ]

src/components/editview/rightPropertyBar/property.vue

@@ -40,8 +40,11 @@
       :Height="Height"
       v-show="itemType == 'BaseImage'"
     ></BaseImagePro>
-    <BaseEquipment v-if="true"></BaseEquipment>
-    <!-- itemType == 'BaseEquipment' -->
+    <BaseEquipment
+      :InfoPointList="infoPointList"
+      :EquipId="equipId"
+      v-show="itemType == 'BaseEquipment'"
+    ></BaseEquipment>
   </div>
 </template>
 <script>
@@ -92,6 +95,8 @@ export default {
       fillColor: "", //填充色
       begin: "", //开头样式
       end: "", //结尾样式
+      infoPointList: [], //设备--信息点数组
+      equipId: "", //设备 id
     };
   },
   mounted() {
@@ -108,13 +113,12 @@ export default {
           ? itemList[0].relationData
           : null;
         this.itemType = data.properties.type ? data.properties.type : "";
-        console.log("datadata", this.itemType);
       } else {
         this.itemType = "";
       }
-      console.log(this.itemType);
       // 同步联动样式
       this.linkStyle(itemList);
+      console.log("itemList", itemList);
     },
     // 同步样式
     linkStyle(itemList) {
@@ -157,6 +161,16 @@ export default {
         this.strokeColor = item.strokeColor.toRgba();
         this.fillColor = item.fillColor.toRgba();
         // 填充色
+      } else if (this.itemType == "BaseEquipment") {
+        if (
+          item.legendData.properties &&
+          item.legendData.properties.infoPointList
+        ) {
+          this.infoPointList = item.legendData.properties.infoPointList;
+        } else {
+          this.infoPointList = [];
+        }
+        this.equipId = item.legendData.id;
       }
     },
   },