94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<template>
|
|
<div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
|
|
<a-card title="酸雨点位" :headStyle="{'padding':'0px 5px'}"
|
|
:bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
|
|
<div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
|
|
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e51ac94d2.png" alt=""
|
|
style="width: 30px;height: 30px">
|
|
</div>
|
|
|
|
<div class="left-close-button" @click="showTable(1)" v-if="type1 == 0">
|
|
<img src="https://sqtt.oss-cn-qingdao.aliyuncs.com/Uploads/image/goods/2022-01-08/61d8e83754c7e.png" alt=""
|
|
style="width: 30px;height: 30px">
|
|
</div>
|
|
<a-table :columns="columns" :data-source="rowData" size="mini" :scroll="{y:150,x:500}" :pagination="false">
|
|
</a-table>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
const columns = [
|
|
{
|
|
title: '点位名称',
|
|
dataIndex: 'place',
|
|
},
|
|
{
|
|
title: '点位等级',
|
|
className: 'regionLevel',
|
|
dataIndex: 'regionLevel',
|
|
},
|
|
{
|
|
title: '所属地区',
|
|
dataIndex: 'area',
|
|
},
|
|
{
|
|
title: '所属路段',
|
|
dataIndex: 'road',
|
|
},
|
|
{
|
|
title: '噪声 dB(A)',
|
|
dataIndex: 'leq',
|
|
},
|
|
];
|
|
export default {
|
|
props: {
|
|
rowData: {
|
|
type: Array
|
|
}
|
|
},
|
|
methods: {
|
|
showTable: function (type) {
|
|
this.type1 = type
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
columns,
|
|
pagination: {
|
|
total: 0
|
|
},
|
|
type1: 0
|
|
};
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.map-table-container {
|
|
box-sizing: border-box;
|
|
width: 500px;
|
|
padding: 10px;
|
|
position: absolute;
|
|
bottom: 300px;
|
|
transition: right 0.8s;
|
|
}
|
|
|
|
::v-deep .ant-table-thead > tr > th, ::v-deep .ant-table-tbody > tr > td {
|
|
padding: 3px 3px;
|
|
}
|
|
|
|
.left-close-button {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
left: -40px;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|