|
@@ -0,0 +1,197 @@
|
|
|
|
+<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>
|
|
|
|
+ </div>
|
|
|
|
+ </el-collapse-transition>
|
|
|
|
+ <edit-list></edit-list>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+import editList from '@/components/edit.vue'
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'Legend',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ show: true,
|
|
|
|
+ value1: true,
|
|
|
|
+ dataSelect2: [
|
|
|
|
+ { id: 'test1', name: '选择项' },
|
|
|
|
+ { id: 'test2', name: '单平米' },
|
|
|
|
+ { id: 'test3', name: '下级分项' },
|
|
|
|
+ { id: 'test4', name: '滑动平均滑动平均' }
|
|
|
|
+ ],
|
|
|
|
+ tableData: [
|
|
|
|
+ {
|
|
|
|
+ project: '建筑面积',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ project: '主要设备房',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ project: '机动车位',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ project: '疏散通道口',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ project: '卫生间',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ project: '扶梯/坡梯',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ project: '客梯',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ project: '货梯',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ project: '防火分区',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ project: '连通口',
|
|
|
|
+ num: '18500',
|
|
|
|
+ type: '㎡',
|
|
|
|
+ lege: '---'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ multipleSelection: [],
|
|
|
|
+ testModel: ['test3']
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: { editList },
|
|
|
|
+ methods: {
|
|
|
|
+ handleSelectionChange(val) {
|
|
|
|
+ this.multipleSelection = val
|
|
|
|
+ },
|
|
|
|
+ testClick(data) {
|
|
|
|
+ console.log(data)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ testModel(n, o) {
|
|
|
|
+ console.log(n, o)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.legend-container {
|
|
|
|
+ position: relative;
|
|
|
|
+ .legend {
|
|
|
|
+ // padding: 12px 8px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 44px;
|
|
|
|
+ width: 44px;
|
|
|
|
+ height: 44px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
|
+ color: rgba(2, 91, 170, 1);
|
|
|
|
+ line-height: 19px;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ line-height: 44px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ .legend-tab {
|
|
|
|
+ position: absolute;
|
|
|
|
+ // width: 600px;
|
|
|
|
+ // height: 500px;
|
|
|
|
+ top: 0;
|
|
|
|
+ right: 44px;
|
|
|
|
+ .legend-table {
|
|
|
|
+ width: 387px;
|
|
|
|
+ // 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;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|