gis模块

src/views/visualiz/atmosphere/acid/components/mapTableCenter.vue

@@ -0,0 +1,93 @@
+<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>