123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- <template>
- <!-- 设备右侧点击图例按钮显示的图例弹框 -->
- <div class='box'>
- <div class='legend-box' v-if='isShow'>
- <a-table :columns='columns' :data-source='data' :row-selection='rowSelection' :pagination='false' size='small' />
- <div class='switch-btn'>
- <a-switch @change='changeSwitch' size='small' /> 隐藏数量为0的项目
- </div>
- <div class='remark'>
- 注:1.主要设备房包括:制冷机房、生活水泵房、消防泵房
- <p>2.图例后 的数字,代表此位置的数量</p>
- <p> 3.B2-1至B2-8为防火分区编号</p>
- </div>
- </div>
- <div v-if='!isShow && showPic' class='pic-box'>
- <img src='@/assets/imgs/eq.jpg' alt />
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- isShow: false,
- showPic: false,
- columns: [
- {
- title: '项目',
- dataIndex: 'projectName',
- key: 'projectName'
- },
- {
- title: '数量',
- dataIndex: 'count',
- key: 'count'
- },
- {
- title: '单位',
- dataIndex: 'unit',
- key: 'unit'
- },
- {
- title: '图例',
- dataIndex: 'legend',
- key: 'legend'
- }
- ],
- data: [
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- },
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- },
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- },
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- },
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- },
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- },
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- },
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- },
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- },
- {
- projectName: '建筑面积',
- count: '18500',
- unit: 'm2',
- legend: '——'
- }
- ],
- rowSelection: {
- onChange: (selectedRowKeys, selectedRows) => {
- //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
- },
- onSelect: (record, selected, selectedRows) => {
- //console.log(record, selected, selectedRows)
- },
- onSelectAll: (selected, selectedRows, changeRows) => {
- //console.log(selected, selectedRows, changeRows)
- }
- }
- }
- },
- computed: {},
- methods: {
- changeSwitch(checked) {
- //console.log(`a-switch to ${checked}`)
- },
- open() {
- this.isShow = !this.isShow
- },
- openPic() {
- this.showPic = !this.showPic
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .box {
- .legend-box {
- 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);
- position: fixed;
- z-index: 2;
- right: 80px;
- top: 164px;
- padding: 16px 0;
- overflow-y: auto;
- .switch-btn {
- position: absolute;
- bottom: 78px;
- right: 16px;
- color: #646c73;
- }
- .remark {
- position: absolute;
- bottom: 16px;
- left: 16px;
- p {
- padding-left: 28px;
- margin-bottom: 0;
- }
- }
- }
- .pic-box {
- width: 387px;
- height: 346px;
- 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);
- position: fixed;
- z-index: 2;
- right: 80px;
- top: 405px;
- padding: 16px 0;
- overflow-y: auto;
- }
- }
- </style>
- <style lang="less" >
- .box {
- .legend-box {
- th {
- background: rgba(2, 91, 170, 0.1) !important;
- font-size: 12px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: border;
- color: #000;
- }
- }
- }
- </style>
|