gis噪声质量统计

src/api/ecology/noise/road-sound.js

@@ -57,6 +57,7 @@ const updateRoadNoise = function (data) {
 const pageRoadNoiseStatisticUrl = '/sound/road/noise/statistic';
 const pageRoadNoiseCompare = '/sound/road/noise/statistic/compare';
 const roadNoiseYearEnd = '/sound/road/noise/statistic/yearEnd';
+const roadNoiseYear = '/sound/road/noise/statistic/year';
 const getHistoryyears = function () {
     return axios.get("/sound/road/noise/history-year")
 }
@@ -68,6 +69,10 @@ const getGisBase = function(data){
     return axios.get("/sound/road/noise/gis",{params:data})
 }
 
+const statisticLevelYear = function (params){
+  return axios.get(roadNoiseYear,{params})
+}
+
 const getGisArea = function(data){
     return axios.get("/sound/road/noise/gis/area",{params:data})
 }
@@ -100,5 +105,6 @@ export {
     getGisArea,
     roadNoiseYearEnd,
     getTrendChart,
-    getPlaceByRegionLevel
+    getPlaceByRegionLevel,
+    statisticLevelYear
 }

src/views/components/mapTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-550px'}">
     <a-card title="监测数据 dB(A)" :headStyle="{'padding':'0px 5px'}"
             :bodyStyle="{'padding':'0px 5px','height':'200px','overFlow':'scroll'}">
       <div class="left-close-button" @click="showTable(0)" v-if="type1 == 1">
@@ -68,7 +68,7 @@ export default {
 <style scoped >
 .map-table-container {
   box-sizing: border-box;
-  width: 500px;
+  width: 550px;
   padding: 10px;
   position: absolute;
   bottom: 0px;

src/views/components/mapTableCenter.vue

@@ -1,17 +1,16 @@
 <template>
-  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-500px'}">
+  <div class="map-table-container " :style="{'right':type1 == 1 ? '0px':'-550px'}">
-    <a-card title="道路交通噪声点位" :headStyle="{'padding':'0px 5px'}"
+    <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 :columns="columns" :data-source="rowData" size="small" row-key="place" :scroll="{y:150,x:500}" :pagination="false">
       </a-table>
     </a-card>
   </div>
@@ -21,26 +20,25 @@
 
 const columns = [
   {
-    title: '点位名称',
+    title: '区域',
-    dataIndex: 'place',
-  },
-  {
-    title: '点位等级',
-    className: 'regionLevel',
-    dataIndex: 'regionLevel',
-  },
-  {
-    title: '所属地区',
     dataIndex: 'area',
   },
   {
-    title: '所属路段',
+    title: '测点数量',
-    dataIndex: 'road',
+    dataIndex: 'placeTotal',
   },
   {
-    title: '噪声 dB(A)',
+    title: '道路总长',
+    dataIndex: 'roadLengthTotal',
+  },
+  {
+    title: 'LEQ',
     dataIndex: 'leq',
   },
+  {
+    title: '质量等级',
+    dataIndex: 'level',
+  },
 ];
 export default {
   props: {
@@ -68,10 +66,11 @@ export default {
 <style scoped>
 .map-table-container {
   box-sizing: border-box;
-  width: 500px;
+  width: 550px;
   padding: 10px;
   position: absolute;
-  bottom: 300px;
+  /*bottom: 300px;*/
+  top: 50px;
   transition: right 0.8s;
 }
 
@@ -85,7 +84,7 @@ export default {
   background-color: #fff;
   position: absolute;
   left: -40px;
-  bottom: 0;
+  top: 0;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/visualiz/sound/road/index.vue

@@ -9,9 +9,7 @@
 
         <a-select @change="whereChange" name="year" v-model:value="where.monitorYear">
           <a-select-option v-for="item in yearOptions" :key="item.value">
-            {{
+            {{item.label }}
-              item.label
-            }}
           </a-select-option>
         </a-select>
         <a-radio-group @change="whereChange" name="area" v-model:value="where.regionLevel">
@@ -28,19 +26,20 @@
     <div id="map" ref="map" style="overflow: hidden"></div>
     <tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
     <mapNominal :param="nominalList"></mapNominal>
-    <!--    <map-table-center :rowData="pointData"></map-table-center>-->
+    <map-table-center :rowData="levelData"></map-table-center>
     <map-table :rowData="pointData"></map-table>
   </div>
 </template>
 <script>
 import {
   getGisBase,
-  getColumnOptions
+  getColumnOptions,
+  statisticLevelYear
 } from "@/api/ecology/noise/road-sound";
 import tipTool from "@/views/components/tipTool";
 import mapNominal from "@/views/components/mapNominal";
 import mapTable from "@/views/components/mapTable";
-// import mapTableCenter from "@/views/components/mapTableCenter";
+import mapTableCenter from "@/views/components/mapTableCenter";
 
 let scene = null;
 let pointLayer = null;
@@ -51,7 +50,7 @@ export default {
     tipTool,
     mapNominal,
     mapTable,
-    // mapTableCenter
+    mapTableCenter
   },
   data() {
     return {
@@ -64,6 +63,7 @@ export default {
       },
       map: {},
       pointData: [],
+      levelData:[],
       currentY: 0,
       currentX: 30000,
       tipFlag: false,
@@ -251,6 +251,21 @@ export default {
       if (scene && pointLayer) {
         scene.removeLayer(pointLayer)
       }
+      statisticLevelYear(this.where).then(res=>{
+        this.levelData = [];
+        if (res.data.code == 0 && res.data.data.length > 0) {
+          res.data.data.sort((a,b)=>{
+            if(a.area == "南宁市"){
+              return 1
+            }
+            if(b.area == "南宁市"){
+              return -1
+            }
+            return 0
+          })
+          that.levelData = res.data.data
+        }
+      })
       getGisBase(this.where).then((res) => {
         that.pointData = []
         that.dataSource = []