yx 4 lat temu
rodzic
commit
627a3fe206

+ 5 - 5
package.json

@@ -8,11 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@saga-web/base": "2.1.22",
-    "@saga-web/big": "1.0.65",
-    "@saga-web/draw": "2.1.100",
-    "@saga-web/feng-map": "1.0.16",
-    "@saga-web/graph": "2.1.101",
+    "@saga-web/base": "2.1.24",
+    "@saga-web/big": "1.0.95",
+    "@saga-web/draw": "2.1.105",
+    "@saga-web/feng-map": "1.0.29",
+    "@saga-web/graph": "2.1.117",
     "ant-design-vue": "^1.6.0",
     "core-js": "^3.6.4",
     "element-ui": "^2.13.2",

+ 4 - 0
src/components/baseEditer.vue

@@ -668,6 +668,10 @@ export default {
             bus.$on("changeEquipmentName", val => {
                 this.scene.updateEquipmentName(val);
             });
+            // 更改设备信息点名称
+            bus.$on("changeInfoName", val => {
+                this.scene.updateEquipmentInfoName(val);
+            });
             // 改变图例名称
             bus.$on("changeImageNum", val => {
                 this.scene.upadatImageNum(val);

+ 104 - 13
src/components/edit/equipmentAttr.vue

@@ -6,13 +6,38 @@
             <!-- <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{editStatus[type]}}</a-button> -->
         </div>
         <div class='row'>
-            <a-input v-model='equipmentName' @change='changeEquipmentName' />
+            <a-input v-model='equipmentName' size='small' @change='changeEquipmentName' />
+        </div>
+        <div class='row'>
+            <div class='row-tit'>信息点</div>
+        </div>
+        <!-- 信息点 信息 -->
+        <div class='contain' v-for='(item,index) in info' :key='index'>
+            <div class='row'>
+                <div>信息点名称:</div>
+                <a-input v-model='info[index]' class='input' @change='changeInfoName(index)' />
+            </div>
+            <div class='row'>
+                <div class='row-tit'>字号</div>
+                <div class='grid-content'>
+                    <a-input-number :min='1' style='width: 128px' />
+                </div>
+                <div class='color-choice'>
+                    <swatches popover-x='left' />
+                </div>
+            </div>
+        </div>
+        <!-- 添加信息点 信息 -->
+        <div class="row">
+            <a-button @click="addInfo">添加信息点</a-button>
         </div>
     </div>
 </template>
 <script>
 import bus from '@/bus'
 import { log } from 'util'
+import Swatches from 'vue-swatches'
+
 export default {
     name: 'equipmentAttr',
     props: {
@@ -20,36 +45,102 @@ export default {
             type: Object,
             default() {
                 return {}
-            }
-        }
+            },
+        },
     },
+    components: { Swatches },
     data() {
         return {
             equipmentName: '',
-            equipmentData: {}
+            equipmentData: {},
+            InfoList: [],
+            info: [],
         }
     },
-    components: {},
+
     beforeMount() {},
-    created() {
-        // 设置设备名称
-        this.equipmentData = this.focusItemList.itemList[0]
-        this.equipmentName = this.equipmentData.name
+    watch: {
+        focusItemList: {
+            handler(newV, oldV) {
+                if (newV !== oldV) {
+                    this.init()
+                }
+            },
+            deep: true,
+        },
     },
-    mounted() {
-       
+    created() {
+        this.init()
     },
+    mounted() {},
     methods: {
+        addInfo(){
+            this.info.push('')
+        },
+        init() {
+            // 设置设备名称
+            this.equipmentData = this.focusItemList.itemList[0]
+            this.equipmentName = this.equipmentData.name
+            this.InfoList = this.focusItemList.itemList[0]._epData.InfoList
+            this.info = []
+            this.InfoList.map((item) => {
+                this.info.push(item.Name)
+            })
+            console.log(this.focusItemList.itemList[0]._epData.InfoList)
+        },
         changeEquipmentName() {
             bus.$emit('changeEquipmentName', this.equipmentName)
-        }
-    }
+        },
+        // 更改信息点名称
+        changeInfoName(index) {
+            let name = this.info[index]
+            console.log(index,name)
+            bus.$emit('changeInfoName', { index, name })
+        },
+    },
 }
 </script>
 <style lang='less' scoped>
 .equipment-attr {
     width: 100%;
     height: 100%;
+    padding: 12px 16px;
+    box-sizing: border-box;
     //   background-color: lightblue;
+    .contain {
+        margin: 10px 0;
+    }
+    .row {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 12px;
+        .color-choice {
+            & /deep/ .vue-swatches__trigger {
+                width: 26px !important;
+                height: 26px !important;
+                border-radius: 0px !important;
+            }
+        }
+        .row-tit {
+            color: #1f2429;
+            font-size: 14px;
+        }
+        .input {
+            width: 150px;
+        }
+    }
+    .grid {
+        margin: 10px 15px;
+        .grid-title {
+            font-size: 12px;
+            color: #8d9399;
+        }
+    }
+    .grid-content {
+        // margin-top: 10px;
+        position: relative;
+    }
 }
 </style>

+ 11 - 3
src/components/mapClass/EditScence.ts

@@ -143,10 +143,10 @@ export class EditScence extends SGraphScene {
             // 点选
             this.clickToAddArea(obj.itemList[0]);
             return;
-        } else if( obj.itemList[0] instanceof SEquipmentItem){
+        } else if (obj.itemList[0] instanceof SEquipmentItem) {
             itemType = "Equipment";
         }
-         else {
+        else {
             itemType = "";
         }
         if (obj.itemList.length == 1) {
@@ -686,6 +686,14 @@ export class EditScence extends SGraphScene {
     updateEquipmentName(val: string): void {
         this.focusItem!.name = val;
     }
+    updateEquipmentInfoName(val: object): void {
+        console.log(val)
+        // @ts-ignore
+        // this.focusItem.textArr[index + 1].text = name
+        // @ts-ignore
+        // this.focusItem.epData.InfoList[index].Name = name
+        this.focusItem.info = val
+    }
 
     /**
      * 更改item Num数量
@@ -1442,7 +1450,7 @@ export class EditScence extends SGraphScene {
             Pos: { X: event.x, Y: event.y }, // 位置
             Size: { Width: 80, Height: 80 }, // 大小
             InfoList: this._legend.InfoList || [],
-            Properties: this._legend.Properties||  {
+            Properties: this._legend.Properties || {
                 StatusImage: [
                     {
                         Status: "Running", // 运行

+ 21 - 2
src/lib/items/SEquipmentItem.ts

@@ -57,6 +57,8 @@ export class SEquipmentItem extends SObjectItem {
     }
     set epData(v: EquipmentData) {
         this._epData = v;
+
+
     }
     // 修改设备名称
     get name(): string {
@@ -68,6 +70,21 @@ export class SEquipmentItem extends SObjectItem {
             this.textArr[0].text = v
         }
     }
+    _info: any[] = []
+    // 修改信息点名称
+    get info(): [] {
+        return this._info
+    }
+    set info({ index, name }) {
+        if (this.textArr && this.textArr.length > 1) {
+            if (this.textArr[index + 1]){
+
+                this.textArr[index + 1].text = name
+            }else{
+                this.textArr[index + 1] = 
+            }
+        }
+    }
 
     /**
      *
@@ -127,7 +144,8 @@ export class SEquipmentItem extends SObjectItem {
         nameItem.backgroundColor = SColor.Transparent;
         nameItem.font.size = 14;
         nameItem.text = epData.Name;
-        nameItem.moveTo(-epData.Size.Width / 2, epData.Size.Height / 2 + 7);
+        // nameItem.moveTo(-epData.Size.Width / 2, epData.Size.Height / 2 + 7);
+        nameItem.moveTo(10, epData.Size.Height + 7);
         this.textArr.push(nameItem);
         // 信息点
         let { InfoList } = epData;
@@ -197,10 +215,11 @@ export class SEquipmentItem extends SObjectItem {
         data.Size.Width = this.width;
         data.Size.Height = this.height;
         // @ts-ignore
-        // infoList中坐标处理
+        // infoList中坐标,名称处理
         data.InfoList.map((item, index, arr) => {
             arr[index].X = this.textArr[index + 1].pos.x;
             arr[index].Y = this.textArr[index + 1].pos.y;
+            arr[index].Name = this.textArr[index + 1].text;
         });
         return data;
     }