数字环保 数据中心

src/api/datacenter.js

@@ -9,11 +9,14 @@ export function getResource() {
 }
 
 //点击左侧菜单列表查询落点
-export function getResourcePoint(resourceTable) {
+export function getResourcePoint(resourceTable, name) {
   return request({
     url: '/center-environment/VisuForestDataCenterController/getResourcePoint',
     method: 'post',
-    data:{"resourceTable":resourceTable}
+    data:{
+      "name": name,
+      "resourceTable":resourceTable
+    }
   })
 }
 //点击右侧菜单列表查询落点

src/views/datacenter.vue

@@ -12,9 +12,24 @@
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="i-list-con h-78">
               <div class="d-l-con-icon">
+
+                <div class="i-list-con h-65" v-show="showSearch == true">
+                  <div class="head-container">
+                    <el-input
+                      v-model="searchName"
+                      placeholder="请输入名称"
+                      @blur="searchByName()"
+                      clearable
+                      size="small"
+                      prefix-icon="el-icon-search"
+                      style="margin-bottom: 20px"
+                    />
+                  </div>
+                </div>
+
                 <div class="icon-con" :class="{on:iconCurrentIndex==item.resourceTable}"
                      v-for="(item,index) in resourcesList"
-                     v-on:click="indentleftSetMarkers(item.type)">
+                     v-on:click="indentleftSetMarkers(item.type, searchName)">
                      <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
                   <div class="iconfont icon icon-normal" :class="item.icon"></div>
                   <div class="icon-text">
@@ -35,7 +50,7 @@
       <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
       <!--      </button>-->
       <!-- 右侧 -->
-      <div class="rightbar" ref="right">
+      <div class="rightbar" ref="right" v-show="showSearch == true">
         <div class="forthis">
           <dv-border-box-13    backgroundColor="#09140e" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
@@ -106,6 +121,12 @@ export default {
   },
   data() {
     return {
+      // 搜索框
+      showSearch: false,
+      // 搜索名称
+      searchName: undefined,
+      // 搜索类型
+      searchType: undefined,
       iconCurrentIndex: '',
       listCurrentIndex: '',
       markersList: [],
@@ -126,6 +147,11 @@ export default {
   },
 
   methods: {
+    // 根据名称筛选资源点位
+    searchByName() {
+      this.$modal.msgSuccess("正在查询，请稍后...");
+      this.indentleftSetMarkers(this.searchType, this.searchName);
+    },
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
     bottomMenuList() {
       this.$refs.bottomMenu.selectTaskList()//获取任务列表
@@ -280,17 +306,29 @@ export default {
         //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
         res.data.forEach(function(data, index) {
           that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-"));
+          if(index < 5){
+            // that.fireControlViewPoint(data.type, 'undefined');
+            that.indentleftSetMarkers(data.type, '所有');
+          }
         })
       })
     },
-    indentleftSetMarkers(resourceTable) {
+    indentleftSetMarkers(resourceTable, name) {
+      // 搜索框
+      // if(name == 'undefined' && this.showSearch == false){
+      // if(name == '所有' && this.showSearch == false){
+      if(name == '所有'){
+        name = undefined;
+      }else {
+        this.showSearch = true;
+      }
       this.iconCurrentIndex = resourceTable
       let that = this
       that.resourceTable = resourceTable
       that.markersList = []
       that.source = []
       //点击左侧地图落点
-      getResourcePoint(resourceTable).then(res => {
+      getResourcePoint(resourceTable, name).then(res => {
         that.deptGroupList = res.data.deptGroupList
         if (res.data.deptGroupList != null && res.data.deptGroupList.length > 0) {
           for (let i = 0; i < res.data.deptGroupList.length; i++) {
@@ -309,156 +347,7 @@ export default {
               keepBindPopup: false,
               isAggregation: false
             }
-            if (resourceTable == 'centerdata_t_environment_key_enterprise') { //重点企业
-              markersMap.icon = 'sj-icon-map-centerdata-t-environment-key-enterprise'
-              markersMap.lng = res.data.resourceList[i].longitude
-              markersMap.lat = res.data.resourceList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
-                  .data.resourceList[i].latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>企业名称：' + res.data.resourceList[i].name +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>地址：' + res.data.resourceList[i].address +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>企业法人：' + res.data.resourceList[i].legalPerson +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>联系电话：' + res.data.resourceList[i].contactsPhone +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span></div>'
-            } else if (resourceTable == 'centerdata_t_environment_prohibition_area') { //禁烧区
-              markersMap.icon = 'sj-icon-map-centerdata-t-environment-prohibition-area'
-              markersMap.lng = res.data.resourceList[i].longitude
-              markersMap.lat = res.data.resourceList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
-                  .data.resourceList[i].latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>禁烧区名称：' + res.data.resourceList[i].name + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>地址：' + res.data.resourceList[i].address + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>区域负责人：' + res.data.resourceList[i].principal + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>联系电话：' + res.data.resourceList[i].contactsPhone + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span></div>'
-            } else if (resourceTable == 'centerdata_t_environment_source_pollution') { //污染源
-              markersMap.icon = 'sj-icon-map-centerdata-t-environment-source-pollution'
-              markersMap.lng = res.data.resourceList[i].longitude
-              markersMap.lat = res.data.resourceList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
-                  .data.resourceList[i].latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>污染源名称：' + res.data.resourceList[i].name +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>地址：' + res.data.resourceList[i].address +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '</div>'
-            } else if (resourceTable == 'centerdata_t_environment_sewage_outlet') { //排污口
-              markersMap.icon = 'sj-icon-map-centerdata_t_environment_sewage_outlet'
-              markersMap.lng = res.data.resourceList[i].longitude
-              markersMap.lat = res.data.resourceList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
-                  .data.resourceList[i].latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>排污口名称：' + res.data.resourceList[i].name +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>地址：' + res.data.resourceList[i].address +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '</div>'
-            }
-            that.markersList.push(markersMap)
+            that.markersList.push(this.getMarkersMap(resourceTable, markersMap, res.data.resourceList[i]));
           }
         }
         this.dataChat()
@@ -484,161 +373,160 @@ export default {
               keepBindPopup: false,
               isAggregation: false
             }
-            if (that.resourceTable == 'centerdata_t_environment_key_enterprise') { //重点企业
-              markersMap.icon = 'sj-icon-map-centerdata-t-environment-key-enterprise'
-              markersMap.lng = res.data.resourceList[i].longitude
-              markersMap.lat = res.data.resourceList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
-                  .data.resourceList[i].latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>企业名称：' + res.data.resourceList[i].name +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>地址：' + res.data.resourceList[i].address +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>企业法人：' + res.data.resourceList[i].legalPerson +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>联系电话：' + res.data.resourceList[i].contactsPhone +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span></div>'
-            } else if (that.resourceTable == 'centerdata_t_environment_prohibition_area') { //禁烧区
-              markersMap.icon = 'sj-icon-map-centerdata-t-environment-prohibition-area'
-              markersMap.lng = res.data.resourceList[i].longitude
-              markersMap.lat = res.data.resourceList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
-                  .data.resourceList[i].latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>禁烧区名称：' + res.data.resourceList[i].name + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>地址：' + res.data.resourceList[i].address + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>区域负责人：' + res.data.resourceList[i].principal + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>联系电话：' + res.data.resourceList[i].contactsPhone + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span></div>'
-            } else if (that.resourceTable == 'centerdata_t_environment_source_pollution') { //污染源
-              markersMap.icon = 'sj-icon-map-centerdata-t-environment-source-pollution'
-              markersMap.lng = res.data.resourceList[i].longitude
-              markersMap.lat = res.data.resourceList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
-                  .data.resourceList[i].latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>污染源名称：' + res.data.resourceList[i].name +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>地址：' + res.data.resourceList[i].address +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '</div>'
-            } else if (that.resourceTable == 'centerdata_t_environment_sewage_outlet') { //排污口
-              markersMap.icon = 'sj-icon-map-centerdata_t_environment_sewage_outlet'
-              markersMap.lng = res.data.resourceList[i].longitude
-              markersMap.lat = res.data.resourceList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
-                  .data.resourceList[i].latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>排污口名称：' + res.data.resourceList[i].name +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>地址：' + res.data.resourceList[i].address +
-                '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '</div>'
-            }
-            that.markersList.push(markersMap)
+            that.markersList.push(this.getMarkersMap(that.resourceTable, markersMap, res.data.resourceList[i]));
           }
         }
         that.$refs.supermap.clearM(false)
         that.$refs.supermap.setMarkers(that.markersList)
       })
+    },
+    getMarkersMap(resourceTable, markersMap, item){
+      if (resourceTable == 'centerdata_t_environment_key_enterprise') { //重点企业
+        markersMap.icon = 'sj-icon-map-centerdata-t-environment-key-enterprise'
+        markersMap.lng = item.longitude
+        markersMap.lat = item.latitude
+        markersMap.bindPopupHtml = '<div class="map-tip">' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>经纬度：' + item.longitude + ',' + item.latitude + '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>企业名称：' + item.name +
+          '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>地址：' + item.address +
+          '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>企业法人：' + item.legalPerson +
+          '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>联系电话：' + item.contactsPhone +
+          '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span></div>'
+      } else if (resourceTable == 'centerdata_t_environment_prohibition_area') { //禁烧区
+        markersMap.icon = 'sj-icon-map-centerdata-t-environment-prohibition-area'
+        markersMap.lng = item.longitude
+        markersMap.lat = item.latitude
+        markersMap.bindPopupHtml = '<div class="map-tip">' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>经纬度：' + item.longitude + ',' + item.latitude + '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>禁烧区名称：' + item.name + '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>地址：' + item.address + '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>区域负责人：' + item.principal + '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>联系电话：' + item.contactsPhone + '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span></div>'
+      } else if (resourceTable == 'centerdata_t_environment_source_pollution') { //污染源
+        markersMap.icon = 'sj-icon-map-centerdata-t-environment-source-pollution'
+        markersMap.lng = item.longitude
+        markersMap.lat = item.latitude
+        markersMap.bindPopupHtml = '<div class="map-tip">' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>经纬度：' + item.longitude + ',' + item.latitude + '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>污染源名称：' + item.name +
+          '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>地址：' + item.address +
+          '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '</div>'
+      } else if (resourceTable == 'centerdata_t_environment_sewage_outlet') { //排污口
+        markersMap.icon = 'sj-icon-map-centerdata_t_environment_sewage_outlet'
+        markersMap.lng = item.longitude
+        markersMap.lat = item.latitude
+        markersMap.bindPopupHtml = '<div class="map-tip">' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>经纬度：' + item.longitude + ',' + item.latitude + '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>排污口名称：' + item.name +
+          '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '                  <div class="d-l-con">' +
+          '                  <div class="d-l-l-text">' +
+          '                  <h4>地址：' + item.address +
+          '</h4>' +
+          '                </div>' +
+          '                </div>' +
+          '                </span>' +
+          '<span>' +
+          '</div>'
+      }
+      return markersMap;
     }
 
   }