|
@@ -1,52 +1,55 @@
|
|
|
<template>
|
|
|
- <div class='legend-container'>
|
|
|
- <div class='legend' @click='show=!show'>图例</div>
|
|
|
- <el-collapse-transition>
|
|
|
- <div v-show='show' class='legend-tab'>
|
|
|
- <div class='legend-table'>
|
|
|
- <el-table
|
|
|
- ref='multipleTable'
|
|
|
- :data='tableData'
|
|
|
- tooltip-effect='dark'
|
|
|
- style='width: 100%'
|
|
|
- @selection-change='handleSelectionChange'
|
|
|
- >
|
|
|
- <el-table-column type='selection' width='55'></el-table-column>
|
|
|
- <el-table-column prop='project' label='项目' width='100'></el-table-column>
|
|
|
- <el-table-column prop='num' label='数量'></el-table-column>
|
|
|
- <el-table-column prop='type' label='单位' width='70'></el-table-column>
|
|
|
- <el-table-column prop='lege' label='图例'>
|
|
|
- <template slot-scope='scope'>{{ scope.row.lege }}</template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <div class='swich'>
|
|
|
- <el-switch v-model='value1'></el-switch>
|
|
|
- <span>隐藏数量为0的项目</span>
|
|
|
- </div>
|
|
|
- <div class='remark'>
|
|
|
- <span style='font-weight:bold'>注:</span>
|
|
|
- 1.主要设备房包括:制冷机房、生活水泵房、消防泵房
|
|
|
- 2.图例后 的数字,代表此位置的数量
|
|
|
- 3.
|
|
|
- </div>
|
|
|
- <div class='legendFoot'>
|
|
|
- <el-button size='mini'>取消</el-button>
|
|
|
- <el-button size='mini' type='primary'>保存</el-button>
|
|
|
+ <div>
|
|
|
+ <div class='legend-container'>
|
|
|
+ <div class='legend' @click='showTl'>图例</div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div class='legend-tab' v-if='show'>
|
|
|
+ <div class='legend-table'>
|
|
|
+ <lengend-view :tableData='tableData' :swich='value1'></lengend-view>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div v-if='show2'>
|
|
|
+ <lengend-edit ref='editLen' @cance='cance' :tableData='tableData'></lengend-edit>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ <edit-list></edit-list>
|
|
|
+ </div>
|
|
|
+ <div class='edit_map'>
|
|
|
+ <el-tooltip class='item' effect='dark' content='编辑平面图' placement='left'>
|
|
|
+ <span class='edit-icon'>
|
|
|
+ <a-icon type='edit' style='color:#fff' />
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <div class='hover-div'>
|
|
|
+ <span class='icon1' @click='legendClik'>
|
|
|
+ <a-icon type='form' />
|
|
|
+ </span>
|
|
|
+ <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
|
|
|
+ <span class='icon2' @click='editTl'>
|
|
|
+ <a-icon type='form' />
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
- </el-collapse-transition>
|
|
|
- <edit-list></edit-list>
|
|
|
+ <remarks ref='EditdMarks'></remarks>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import editList from '@/components/edit.vue'
|
|
|
+import lengendView from '@/components/viewLengend'
|
|
|
+import Remarks from '@/components/legendremarks'
|
|
|
+import lengendEdit from '@/components/editLengend'
|
|
|
|
|
|
export default {
|
|
|
name: 'Legend',
|
|
|
data() {
|
|
|
return {
|
|
|
- show: true,
|
|
|
+ text: '1.主要设备房包括:制冷机房、生活水泵房、消防泵房2.图例后 的数字,代表此位置的数量',
|
|
|
+ show: false,
|
|
|
+ show2: false,
|
|
|
value1: true,
|
|
|
dataSelect2: [
|
|
|
{ id: 'test1', name: '选择项' },
|
|
@@ -57,76 +60,123 @@ export default {
|
|
|
tableData: [
|
|
|
{
|
|
|
project: '建筑面积',
|
|
|
- num: '18500',
|
|
|
+ num: '1',
|
|
|
+ type: '㎡',
|
|
|
+ lege: '---'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '5',
|
|
|
+ type: '㎡',
|
|
|
+ lege: '---'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '5',
|
|
|
+ type: '㎡',
|
|
|
+ lege: '---'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '2',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
},
|
|
|
{
|
|
|
- project: '主要设备房',
|
|
|
- num: '18500',
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '3',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
},
|
|
|
{
|
|
|
- project: '机动车位',
|
|
|
- num: '18500',
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '4',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
},
|
|
|
{
|
|
|
- project: '疏散通道口',
|
|
|
- num: '18500',
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '5',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
},
|
|
|
{
|
|
|
- project: '卫生间',
|
|
|
- num: '18500',
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '2',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
},
|
|
|
{
|
|
|
- project: '扶梯/坡梯',
|
|
|
- num: '18500',
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '3',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
},
|
|
|
{
|
|
|
- project: '客梯',
|
|
|
- num: '18500',
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '4',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
},
|
|
|
{
|
|
|
- project: '货梯',
|
|
|
- num: '18500',
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '3',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
},
|
|
|
{
|
|
|
- project: '防火分区',
|
|
|
- num: '18500',
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '2',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
},
|
|
|
{
|
|
|
- project: '连通口',
|
|
|
- num: '18500',
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '3',
|
|
|
+ type: '㎡',
|
|
|
+ lege: '---'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '4',
|
|
|
+ type: '㎡',
|
|
|
+ lege: '---'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ project: '建筑面积',
|
|
|
+ num: '3',
|
|
|
type: '㎡',
|
|
|
lege: '---'
|
|
|
}
|
|
|
],
|
|
|
+ tbData1: [],
|
|
|
+ tbData2: [],
|
|
|
+ tbData3: [],
|
|
|
multipleSelection: [],
|
|
|
testModel: ['test3']
|
|
|
}
|
|
|
},
|
|
|
- components: { editList },
|
|
|
+ components: { editList, lengendView, Remarks, lengendEdit },
|
|
|
methods: {
|
|
|
- handleSelectionChange(val) {
|
|
|
- this.multipleSelection = val
|
|
|
- },
|
|
|
testClick(data) {
|
|
|
console.log(data)
|
|
|
+ },
|
|
|
+ legendClik() {
|
|
|
+ this.$refs.EditdMarks.showModal()
|
|
|
+ },
|
|
|
+ showTl() {
|
|
|
+ this.show = !this.show
|
|
|
+ if (this.show) {
|
|
|
+ this.show2 = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cance() {
|
|
|
+ this.show2 = false
|
|
|
+ },
|
|
|
+ editTl() {
|
|
|
+ this.show = false
|
|
|
+ this.show2 = true
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -161,37 +211,82 @@ export default {
|
|
|
top: 0;
|
|
|
right: 44px;
|
|
|
.legend-table {
|
|
|
- width: 387px;
|
|
|
+ padding-top: 16px;
|
|
|
+ padding-left: 16px;
|
|
|
+ padding-right: 16px;
|
|
|
+ width: 420px;
|
|
|
// height: 546px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid rgba(228, 229, 231, 1);
|
|
|
- .swich {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- margin-top: 8px;
|
|
|
- margin-right: 16px;
|
|
|
- margin-bottom: 12px;
|
|
|
- span {
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- .remark {
|
|
|
- font-size: 12px;
|
|
|
- font-family: MicrosoftYaHeiSemibold;
|
|
|
- color: rgba(31, 35, 41, 1);
|
|
|
- line-height: 16px;
|
|
|
- margin: 0px 16px 16px 16px;
|
|
|
- }
|
|
|
- .legendFoot {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-bottom: 12px;
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.edit_map {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 28px;
|
|
|
+ right: 28px;
|
|
|
+ z-index: 2;
|
|
|
+ .edit-icon {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48px;
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ // &:hover + .hover-div {
|
|
|
+ // display: block;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .hover-div {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 58px;
|
|
|
+ right: 28px;
|
|
|
+ // display: none;
|
|
|
+ .icon1 {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
|
|
|
+ border: 1px solid rgba(31, 36, 41, 0.2);
|
|
|
+ font-size: 16px;
|
|
|
+ display: inline-block;
|
|
|
+ color: #646c73;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .icon2 {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
|
|
|
+ border: 1px solid rgba(31, 36, 41, 0.2);
|
|
|
+ font-size: 16px;
|
|
|
+ display: inline-block;
|
|
|
+ color: #646c73;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-top: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.legend-container {
|
|
|
+ .el-table thead {
|
|
|
+ background: rgba(2, 91, 170, 0.1);
|
|
|
+ }
|
|
|
+ .el-table td,
|
|
|
+ .el-table th {
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|