Forráskód Böngészése

立面图绘制(立面图保存关系和AI推介接口未调试)

zhangyu 5 éve
szülő
commit
1c3485ba21

+ 163 - 59
src/components/ledger/cenote/elevationMap.vue

@@ -1,10 +1,27 @@
 <template>
-  <div class="saga-elevation">
+  <div v-loading="load" class="saga-elevation">
     <div v-if="elevationData.length" class="saga-floor">
-      <div class="saga-rf"><p class="saga-floorName">RF</p><div class="saga-spaceList"></div></div>
+      <div class="saga-rf">
+        <p class="saga-floorName">RF</p>
+        <div class="saga-spaceList">
+          <div class="saga-group" v-for="(winth, index) in groupWidth" :key="index" :style="`width: ${100*winth}px;`"></div>
+        </div>
+      </div>
       <div class="saga-floor-item" v-for="floor in elevationData" :key="floor.FloorSequenceID">
         <p class="saga-floorName">{{floor.FloorLocalName}}<i class="el-icon-right"></i></p>
-        <div class="saga-spaceList"></div>
+        <div class="saga-spaceList">
+          <div class="saga-group" v-for="(group, groupIndex) in floor.group" :key="floor.FloorSequenceID+'-'+groupIndex" :style="`width: ${100*groupWidth[groupIndex]}px;`">
+            <div class="saga-spaceItem" 
+            :class="[spaceItem.IsAI?spaceItem.checked?'saga-spaceItem-checked':'saga-spaceItem-ai':'']" 
+            v-for="spaceItem in group.spaceList" 
+            :key="spaceItem.RoomID" 
+            :title="spaceItem.RoomLocalName"
+            @click="handleClickCheck(spaceItem)"
+            >
+            {{spaceItem.RoomLocalName}}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div v-else class="saga-center">
@@ -21,13 +38,42 @@
   export default {
   data () {
     return {
-      elevationData: [
+      elevationData: [],
+      groupWidth: {},
+      checkedList: [],
+      load: true
+    }
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
+  },
+  props: {
+    params: Object,
+    onlyRead: Boolean,
+    isEdit: Boolean,
+    IsAI: Boolean,
+  },
+  methods: {
+    init () { //获取数据并格式化数据
+      //根据isAI判断请求参数是否包含AI推介数据(暂未完成)
+      // if (this.IsAI) {
+
+      // } else {
+
+      // }
+      console.log(this.params)
+      this.load = true;
+      // 查询竖井关联的空间垂直交通关系
+      // shaftVerticalSpace(this.params, (res) => {
+      // let data = res.Content;
+      let data = [
         {
           FloorSequenceID: 5,
           FloorLocalName: 'F5',
           ZoneSpaceList: [
             {
               RoomID: 'f5-001',
+              IsAI: false,
               RoomLocalName: '业务空间f5-001',
               SpaceIdList: ['f4-002']
             }
@@ -38,10 +84,12 @@
           FloorLocalName: 'F4',
           ZoneSpaceList: [{
             RoomID: 'f4-001',
+            IsAI: true,
             RoomLocalName: '业务空间f4-001',
             SpaceIdList: ['f3-002']
           }, {
             RoomID: 'f4-002',
+            IsAI: true,
             RoomLocalName: '业务空间f4-002',
             SpaceIdList: ['f5-001']
           }]
@@ -51,10 +99,12 @@
           FloorLocalName: 'F3',
           ZoneSpaceList: [{
             RoomID: 'f3-001',
+            IsAI: false,
             RoomLocalName: '业务空间f3-001',
             SpaceIdList: ['f2-002']
           }, {
             RoomID: 'f3-002',
+            IsAI: true,
             RoomLocalName: '业务空间f3-002',
             SpaceIdList: ['f2-002','f4-001']
           }]
@@ -64,14 +114,17 @@
           FloorLocalName: 'F2',
           ZoneSpaceList: [{
             RoomID: 'f2-001',
+            IsAI: false,
             RoomLocalName: '业务空间f2-001',
             SpaceIdList: ['f1-001']
           }, {
             RoomID: 'f2-002',
+            IsAI: true,
             RoomLocalName: '业务空间f2-002',
             SpaceIdList: ['f3-001','f3-002']
           }, {
             RoomID: 'f2-003',
+            IsAI: false,
             RoomLocalName: '业务空间f2-003',
             SpaceIdList: []
           }]
@@ -81,58 +134,92 @@
           FloorLocalName: 'F1',
           ZoneSpaceList: [{
             RoomID: 'f1-001',
+            IsAI: false,
             RoomLocalName: '业务空间f1-001',
             SpaceIdList: ['f2-001']
           }, {
             RoomID: 'f1-002',
+            IsAI: false,
             RoomLocalName: '业务空间f1-002',
             SpaceIdList: []
           }, {
             RoomID: 'f1-003',
+            IsAI: false,
             RoomLocalName: '业务空间f1-003',
             SpaceIdList: []
           }]
         }
-      ]
-    }
-  },
-  computed: {
-    ...mapGetters("layout", ["projectId"])
-  },
-  props: {
-    params: Object
-  },
-  methods: {
-    init () {
-      console.log(JSON.stringify(this.elevationData))
-      // console.log(this.params)
-      //// 查询竖井关联的空间垂直交通关系
-      // shaftVerticalSpace(this.params, (res) => {
-      //   this.elevationData = res.Content
-      // })
-      let max = 0, idMap = {};
-      this.elevationData.reverse().forEach(floor => {
-        if (floor.ZoneSpaceList && floor.ZoneSpaceList.length) {
-          floor.ZoneSpaceList.forEach(space => {
-            if (idMap[space.RoomID]) {
-              space.SpaceIdList.forEach(RoomID =>{
-                if (!idMap[RoomID]) {
-                  idMap[RoomID] = idMap[space.RoomID];
-                }
-              })
-            } else {
-              max++;
-              idMap[space.RoomID] = max;
-              space.SpaceIdList.forEach(RoomID =>{
-                if (!idMap[RoomID]) {
-                  idMap[RoomID] = max;
+      ];
+        let max = 0, idMap = {}, groupMap = {}, copyData = JSON.parse(JSON.stringify(data));
+        this.groupWidth = {};
+        copyData.reverse().forEach(floor => {
+          if (floor.ZoneSpaceList && floor.ZoneSpaceList.length) {
+            floor.ZoneSpaceList.forEach(space => {
+              if (idMap[space.RoomID]) {  // 该业务空间在映射列表中
+                groupMap[idMap[space.RoomID]].push(space)
+                space.SpaceIdList.forEach(RoomID =>{
+                  if (!idMap[RoomID]) {
+                    idMap[RoomID] = idMap[space.RoomID];
+                  }
+                })
+              } else { // 该业务空间不在映射列表中
+                max++;
+                idMap[space.RoomID] = max;
+                groupMap[max] = [];
+                this.groupWidth[max] = 0;
+                groupMap[max].push(space);
+                space.SpaceIdList.forEach(RoomID =>{
+                  if (!idMap[RoomID]) {
+                    idMap[RoomID] = max;
+                  }
+                })
+              }
+            })
+          }
+        })
+        data.forEach((floor, index) =>{
+          floor.group = {};
+          Object.keys(groupMap).forEach(groupIndex =>{
+            let max = 0;
+            floor.group[groupIndex] = {
+              spaceList: []
+            };
+            if (floor.ZoneSpaceList && floor.ZoneSpaceList.length) {
+              floor.ZoneSpaceList.forEach(space => {
+                if (groupMap[groupIndex].find(item => { return space.RoomID == item.RoomID })) {
+                  space.checked = false;
+                  floor.group[groupIndex].spaceList.push(space);
+                  max++;
                 }
               })
             }
+            if (max > this.groupWidth[groupIndex]) {
+              this.groupWidth[groupIndex] = max;
+            }
           })
+        });
+        this.elevationData = data
+        console.log(this.elevationData)
+        this.load = false;
+      // })
+    },
+    handleClickCheck (sapceItem) { //点选推介的业务空间
+      console.log(this.isEdit)
+      if (sapceItem.IsAI && this.isEdit && !this.onlyRead) { //是AI推荐并且编辑模式下
+        sapceItem.checked = sapceItem.checked? false: true;
+        if (sapceItem.checked) {
+          this.checkedList.push(sapceItem)
+        } else {
+          let index = this.checkedList.findIndex(item =>{ return item.RoomID == sapceItem.RoomID })
+          if (index != -1) { // 找到对应的数据
+            this.checkedList.splice(index,1)
+          }
         }
-      })
-      console.log(idMap)
+      }
+    },
+    savaEdit () {// 接口保存数据和业务空间的关系
+      console.log(this.checkedList);
+      this.init();
     }
   },
   watch: {
@@ -142,6 +229,11 @@
       }
       console.log(this.projectId)
     },
+    IsAI() {
+      if (this.params.buildingId && this.params.objectType && this.params.shaftId) {
+        this.init();
+      }
+    },
     params: {
       handler(val) {
         if (this.params.buildingId && this.params.objectType && this.params.shaftId) {
@@ -187,32 +279,44 @@
         line-height: 60px;
       }
       .saga-floorName {
-        width: 50px;
+        min-width: 50px;
         text-align: right;
       }
       .saga-spaceList {
+        display: flex;
+        flex-direction: row;
         flex: 1;
         border-bottom: 2px solid #c1c6d2;
+        box-sizing: border-box;
+        .saga-group {
+          display: flex;
+          flex-direction: row;
+          margin-left: 10px;
+          box-sizing: border-box;
+          .saga-spaceItem {
+            width: 100px;
+            margin-left: 1px;
+            text-align: center;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+            background-color: #ffcc00;
+            border: 1px solid #333333;
+          }
+          .saga-spaceItem-ai{
+            cursor: pointer;
+            box-sizing: border-box;
+            background-color: #eaeae9;
+            border: 1px dashed #333333;
+          }
+          .saga-spaceItem-checked {
+            cursor: pointer;
+            box-sizing: border-box;
+            background-color: green;
+            border: 1px dashed #333333;
+          }
+        }
       }
     }
   }
-
-  .block {
-    display: inline-block;
-    height: 60px;
-    line-height: 60px;
-    width: 120px;
-    text-align: center;
-    position: relative;
-  }
-
-  .relate {
-    background-color: yellow;
-    border: 1px solid black;
-
-  }
-
-  .space {
-    background-color: #999;
-  }
 </style>

+ 17 - 1
src/views/ledger/cenotelist/relatedSpace.vue

@@ -34,6 +34,12 @@
             <el-option v-for="item in buildingList" :key="item.value" :label="item.BuildLocalName" :value="item.BuildID"></el-option>
           </el-select>
         </el-badge>
+        <el-switch
+          v-if="!cenoteObj.onlyRead"
+          style="margin-left:15px;"
+          v-model="isAI"
+          active-text="打开AI">
+        </el-switch>
         <div style="height:calc(100% - 42px);margin:10px 0 0 0;width:100%;">
           <el-row style="height:100%;margin:0;width:55%;position:relative;display:inline-block;border:1px solid #e4e4e4;">
             <el-col :span="4" style="height:100%;border-right:1px solid #e4e4e4;">
@@ -52,7 +58,13 @@
             </el-col>
           </el-row>
           <div class="elevation-box">
-            <elevation-map :params="{buildingId: building, objectType: space, shaftId: $route.query.ShaftId}"></elevation-map>
+            <elevation-map 
+              ref="elevationMap" 
+              :onlyRead="cenoteObj.onlyRead" 
+              :isEdit="isEdit" 
+              :isAI="isAI"
+              :params="{buildingId: building, objectType: space, shaftId: $route.query.ShaftId}">
+            </elevation-map>
           </div>
         </div>
 
@@ -89,6 +101,7 @@ export default {
       buildingLoading: false,//左侧列表加载
       showSpaceDot: false,//空间提示红点
       showBuildDot: false,//楼层提示红点
+      isAI: true,//是否打开AI
     }
   },
   computed: {
@@ -109,6 +122,7 @@ export default {
   },
   created() {
     this.getSpaceData();
+    this.isAI = this.cenoteObj.onlyRead?false:true;
   },
   methods: {
     //获取空间信息
@@ -270,6 +284,8 @@ export default {
     saveEdit() {
       this.isEdit = false;
       this.$refs.cenotegraphy.saveEdit();
+      // 走保存接口,然后回调渲染
+      this.$refs.elevationMap.savaEdit();
     },
     //更换列表或平面图
     changeRadio(val) {