|
@@ -13,7 +13,25 @@
|
|
<a-button type="primary">编辑</a-button>
|
|
<a-button type="primary">编辑</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="map"></div>
|
|
|
|
|
|
+ <div class="concent-bottom">
|
|
|
|
+ <div class="map">
|
|
|
|
+ <div class="legend-btn" @click="legend = !legend">
|
|
|
|
+ <a-icon type="right" style="color: #8D9399;font-size: 10px"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="legend" v-if="legend">
|
|
|
|
+ <div style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px">可能需要补充的图例</div>
|
|
|
|
+ <a-table :columns="columns" :data-source="data" size="middle" :pagination="false">
|
|
|
|
+ <a-table-column key="name" title="state" data-index="state">
|
|
|
|
+ <template slot-scope="text, record">
|
|
|
|
+ <div style="border:1px solid red;width: 20px;height: 20px;">{{text}}</div>
|
|
|
|
+ </template>
|
|
|
|
+ </a-table-column>
|
|
|
|
+ <template v-slot:state>
|
|
|
|
+ </template>
|
|
|
|
+ </a-table>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -70,7 +88,7 @@ const dataArr = [
|
|
{ id: "3221", name: "二级1", checked: "uncheck" }
|
|
{ id: "3221", name: "二级1", checked: "uncheck" }
|
|
]
|
|
]
|
|
}
|
|
}
|
|
- ]
|
|
|
|
|
|
+ ],
|
|
}
|
|
}
|
|
];
|
|
];
|
|
import Tree from "./../components/Tree/Tree.vue";
|
|
import Tree from "./../components/Tree/Tree.vue";
|
|
@@ -78,7 +96,34 @@ export default {
|
|
components: { Tree },
|
|
components: { Tree },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- treeData:JSON.parse(JSON.stringify(dataArr))
|
|
|
|
|
|
+ treeData:JSON.parse(JSON.stringify(dataArr)),
|
|
|
|
+ columns:[
|
|
|
|
+ {
|
|
|
|
+ title: "名称", // 列的名称
|
|
|
|
+ dataIndex: "name", // 列的标识
|
|
|
|
+ },{
|
|
|
|
+ title: "图例", // 列的名称
|
|
|
|
+ dataIndex: "state", // 列的标识
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ data: [
|
|
|
|
+ {
|
|
|
|
+ key: "1",
|
|
|
|
+ name: "客梯",
|
|
|
|
+ state:''
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: "2",
|
|
|
|
+ name: "防火分区",
|
|
|
|
+ state:''
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: "3",
|
|
|
|
+ name: "消防泵室",
|
|
|
|
+ state:'1'
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ legend:false
|
|
};
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -111,6 +156,7 @@ export default {
|
|
.left-nav {
|
|
.left-nav {
|
|
width: 224px;
|
|
width: 224px;
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
+ padding: 0 12px;
|
|
}
|
|
}
|
|
.conent-right {
|
|
.conent-right {
|
|
flex: 1;
|
|
flex: 1;
|
|
@@ -136,11 +182,34 @@ export default {
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .map {
|
|
|
|
- width: 100%;
|
|
|
|
|
|
+ .concent-bottom{
|
|
height: calc(100% - 61px);
|
|
height: calc(100% - 61px);
|
|
- background: red;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ .map {
|
|
|
|
+ flex: 1;
|
|
|
|
+ position: relative;
|
|
|
|
+ /*height: calc(100% - 61px);*/
|
|
|
|
+ /*background: red;*/
|
|
|
|
+ .legend-btn{
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ top:9px;
|
|
|
|
+ width:10px;
|
|
|
|
+ height:24px;
|
|
|
|
+ background:rgba(228,229,231,1);
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .legend{
|
|
|
|
+ width: 200px;
|
|
|
|
+ border-left: 1px solid #EFF0F1;
|
|
|
|
+ height:100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|