楼盘表右侧图例修改

@@ -27,7 +27,35 @@
               楼盘单元格
               楼盘单元格
           </div>
           </div>
           <div class="lp-legend">
           <div class="lp-legend">
-              楼盘图例
+              <div class="handleCol">
+                <div class="btn" @click="legendToggle">
+                    <i class="el-icon-d-arrow-left"></i>
+                    <!-- <i class="el-icon-d-arrow-right"></i> -->
+                </div>
+                <div class="dyzt">
+                    <span>单元状态</span>
+                </div>
+                <div class="fwxz">
+                    <span>房屋性质</span>
+                </div>
+                <div class="fwyt">
+                    <span>房屋用途</span>
+                </div>
+              </div>
+              <div class="legendTable-wrap" :style="{'width':legendToggleFlag ? '204px' : '0'}">
+                <table class="legendTable" cellspacing="1" cellpadding="1" border="1">
+                    <tr>
+                        <th>状态</th>
+                        <th>套数</th>
+                        <th>面积</th>
+                    </tr>
+                    <tr v-for="(item,index) in legendList" :key="index">
+                        <td><i class="el-icon-star-on" :style="{'color':item.color}"></i>{{item.name}}</td>
+                        <td>{{item.ts}}</td>
+                        <td>{{item.mj}}</td>
+                    </tr>
+                </table>
+              </div>
           </div>
           </div>
       </div>
       </div>
       
       
@@ -74,7 +102,70 @@ export default {
         pd:[], //创建楼盘的树结构数据
         pd:[], //创建楼盘的树结构数据
         dialogVisible:false,
         dialogVisible:false,
         menuType:'',
         menuType:'',
-        treeData:{}
+        treeData:{},
+        legendList:[
+            {
+                name:'未确权',
+                color:'#2591FD',
+                ts:'12',
+                mj:'1633'
+            },
+            {
+                name:'已确权',
+                color:'#2591FD',
+                ts:'22',
+                mj:'3109'
+            },
+            {
+                name:'已注销',
+                color:'#2591FD',
+                ts:'13',
+                mj:'1457'
+            },
+            {
+                name:'已备案',
+                color:'#2591FD',
+                ts:'3',
+                mj:'409'
+            },
+            {
+                name:'预抵押',
+                color:'#2591FD',
+                ts:'11',
+                mj:'1466'
+            },
+            {
+                name:'在建抵押',
+                color:'#2591FD',
+                ts:'13',
+                mj:'1792'
+            },
+            {
+                name:'抵押',
+                color:'#2591FD',
+                ts:'14',
+                mj:'13'
+            },
+            {
+                name:'查封',
+                color:'#2591FD',
+                ts:'9',
+                mj:'1436'
+            },
+            {
+                name:'异议',
+                color:'#2591FD',
+                ts:'34',
+                mj:'4342'
+            },
+            {
+                name:'限制',
+                color:'#2591FD',
+                ts:'2',
+                mj:'285'
+            },
+        ],
+        legendToggleFlag:false
     }
     }
   },
   },
   created(){},
   created(){},
@@ -138,6 +229,10 @@ export default {
       //关闭弹框
       //关闭弹框
       closeDaialog(){
       closeDaialog(){
           this.dialogVisible = false
           this.dialogVisible = false
+      },
+      //图例的展开收起
+      legendToggle(){
+          this.legendToggleFlag = !this.legendToggleFlag;
       }
       }
   },
   },
   computed: {},
   computed: {},
@@ -177,14 +272,10 @@ export default {
         height: calc(100% - 161px);
         height: calc(100% - 161px);
         background-color: #ffffff;
         background-color: #ffffff;
         display: flex;
         display: flex;
-        div{
-            height: 100%;
-            line-height: 40px;
-        }
         .lp-tree{
         .lp-tree{
+            height: 100%;
             overflow: hidden;
             overflow: hidden;
             transition: .5s;
             transition: .5s;
-            // position: relative;
             .treeData{
             .treeData{
                 margin-top: 20px;
                 margin-top: 20px;
                 margin-left: 20px;
                 margin-left: 20px;
@@ -201,7 +292,68 @@ export default {
             flex: 1;
             flex: 1;
         }
         }
         .lp-legend{
         .lp-legend{
-            width: 200px;
+            transition: .5s;
+            height: 100%;
+            font-size: 14px;
+            .handleCol{
+                width: 34px;
+                float: right;
+                height: 100%;
+                .btn{
+                    cursor: pointer;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    border-bottom: 1px solid #E6E6E6 ;
+                }
+                .dyzt{
+                    height: 81px;
+                    line-height: 81px;
+                }
+                .fwxz,.fwyt{
+                    height: 122px;
+                }
+                .dyzt,.fwxz,.fwyt{
+                    border-bottom: 1px solid #E6E6E6 ;
+                    span{
+                        text-align: center;
+                        height: 100%;
+                        -webkit-writing-mode: vertical-rl;
+                        writing-mode: vertical-rl;
+                        line-height: 34px;
+                        letter-spacing: 2px;
+                    }
+                }
+            }
+            .legendTable-wrap{
+                transition: .5s;
+                float: right;
+                overflow: hidden;
+                .legendTable{
+                    margin-top: -1px;
+                    tr{
+                        height: 40px;
+                        line-height: 40px;
+                        th:first-child{
+                            width: 80px;
+                        }
+                        th{
+                            width: 60px;
+                            height: 40px;
+                            white-space: nowrap;
+                        }
+                        td {
+                            height: 40px;
+                            text-align: center;
+                            white-space: nowrap;
+                        }
+                        td:first-child{
+                            text-align: left;
+                            text-indent: 2px;
+                        }
+                    }
+                }
+            }
         }
         }
     }
     }
     .btnGroup{
     .btnGroup{