From 3da1818bf94543c9f48191df52f76e1ac92bf542 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期四, 15 四月 2021 16:46:54 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

---
 src/components/panel/topicSearch/SolidWasteSearch.vue |  353 +++++++++++++++++++++++++++++++++++-----------------------
 1 files changed, 215 insertions(+), 138 deletions(-)

diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue
index 31267fe..09d9660 100644
--- a/src/components/panel/topicSearch/SolidWasteSearch.vue
+++ b/src/components/panel/topicSearch/SolidWasteSearch.vue
@@ -1,140 +1,255 @@
 <template>
   <div class="sewers-search" v-if="judgeVisible">
-    <div class="search-title">
-      <span>鍥哄簾</span>
-    </div>
+    <div class="panel-title">{{ title }}</div>
     <div class="search-panel ">
       <el-form ref="form" :model="form" label-width="90px" class="search-form">
-        <el-form-item label="璁炬柦绫诲瀷锛�" size="mini" class="search-panel-item">
+        <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+'锛�'" size="mini"
+                      class="search-panel-item">
           <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
                      :popper-class="'select-down'">
             <el-option
-                v-for="item in SolidWasteTypeOptions"
+                v-for="item in solidWasteTypeOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item :label="form.pipelineType+'锛�'" size="mini">
-          <el-select style="width: 100%" v-model="form.dataType" @change="handleDataType" :popper-class="'select-down'">
-            <el-option
-                v-for="item in dataTypeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-input v-model="form.keyword" size="mini"
-                  placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�">
-          <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i>
-        </el-input>
+        <el-radio-group v-model="form.transferData" class="levelOfRisk">
+          <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index">
+            <span class="levelOfRisk-type">{{ item.name }}</span>
+          </el-radio>
+        </el-radio-group>
+        <div class="rightButtonSearch">
+          <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input>
+          <el-button class="el-icon-search" @click="handleSearch"></el-button>
+        </div>
       </el-form>
     </div>
-    <el-scrollbar style="height:100%">
-      <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
-        <div class="B-TMD-table-list-title">
-          <div class="B-TMD-table-list-head">
-            <div class="B-TMD-table-list-title-y"
-                 :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
-              <span id="waybillNumber" class="" :title="item.properties.pipename">
-                <span class="location-btn" @click="handleLocation(item)">{{ item.properties.pipename }}</span>
-               </span>
-            </div>
-          </div>
-        </div>
-        <div class="B-TMD-table-list-content">
-
-          <div v-for="itm in labelList" :key="itm.label">
-            <span>{{ itm.label }}锛�</span>
-            <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
-          </div>
+    <el-scrollbar style="height:286.22px">
+      <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index"
+           @click="setBounced(item)">
+        <!--        <i class="state"></i>-->
+        <img src="../../../../public/assets/images/map/solidwaste/gf_green2.png" alt="" class="state">
+        <div>
+          <h3>###鐐煎寲閮�</h3>
+          <p>鎵�灞為儴闂細<span>{{ item.Name }}</span></p>
+          <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p>
         </div>
       </div>
     </el-scrollbar>
-    <el-card class="footer-page" v-if="total > 10">
-      <el-pagination
-          small
-          @current-change="handlePage"
-          :page-size=pageSize
-          layout="prev, pager, next"
-          :total=total
-          :current-page=current
-          class="warnPagination"
-      >
-      </el-pagination>
-    </el-card>
   </div>
 </template>
 
 <script>
-// 寮曞叆鍙�夋嫨鏁版嵁
-import { SolidWasteTypeOptions } from '@/conf/layers/LayerSolidWaste'
 
-import WfsHelper from '@components/helpers/WfsHelper'
-import AjaxUtils from '@utils/AjaxUtils'
+import mapApi from '@/api/mapApi'
+import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced'
+import defaultImg from '../../../../public/assets/images/map/solidwaste/gf_green2.png'
 
 export default {
   name: 'SolidWasteSearch',
+  props: ['title'],
   data () {
     return {
       judgeVisible: true,
-      list: [],
-      labelList: SolidWasteTypeOptions[0].labelList,
-      total: 0,
-      SolidWasteTypeOptions: SolidWasteTypeOptions,
-      dataTypeOptions: SolidWasteTypeOptions[0].options,
       form: {
-        pipelineType: SolidWasteTypeOptions[0].label,
-        dataType: SolidWasteTypeOptions[0].options[0].label,
-        query: SolidWasteTypeOptions[0].options[0],
-        keyword: '鍥哄簾闈㈡澘鏁版嵁鏌ヨ'
+        keyword: '鍥哄簾闈㈡澘鏁版嵁鏌ヨ',
+        // 鏁版嵁鐨勪紶閫�
+        transferData: 1
       },
-      isWaybillHover: true,
-      isRouteHover: false
+      levelOfRisk: [
+        {
+          name: '鍏ㄩ儴',
+          value: 1
+        },
+        {
+          name: '姝ｅ父',
+          value: 2
+        },
+        {
+          name: '棰勮',
+          value: 3
+        }
+      ],
+      // 鏁版嵁鎼滅储涔嬪悗锛屽瓨鍌ㄦ暟鎹殑
+      searchDataDisplay: [],
+      instance: null,
+      intervals: [],
+      layer: window.map,
+      L: window.L,
+      times: 5,
+      colors: ['#98FB98', '#ff0000'],
+      solidWasteTypeOptions: [{
+        value: '1',
+        label: '鍖哄煙',
+        options: [{
+          value: '1',
+          layerName: '鍥哄簾',
+          key: 'pipename',
+          label: '鍏ㄩ儴鍥哄簾'
+        }],
+        labelList: [{
+          label: '杈撻�佷粙璐�',
+          key: 'mediumtype'
+        }, {
+          label: '闀垮害(m)',
+          key: 'length'
+        }]
+      }, {
+        value: '2',
+        label: '浼佷笟鍚嶇О',
+        options: [{
+          value: '1',
+          layerName: '鍥哄簾',
+          key: 'pipename',
+          label: '鍏ㄩ儴鍥哄簾'
+        }],
+        labelList: [{
+          label: '杈撻�佷粙璐�',
+          key: 'mediumtype'
+        }, {
+          label: '闀垮害(m)',
+          key: 'length'
+        }]
+      }, {
+        value: '3',
+        label: '浜岀骇鍗曚綅',
+        options: [{
+          value: '1',
+          layerName: '鍥哄簾',
+          key: 'pipename',
+          label: '鍏ㄩ儴鍥哄簾'
+        }],
+        labelList: [{
+          label: '杈撻�佷粙璐�',
+          key: 'mediumtype'
+        }, {
+          label: '闀垮害(m)',
+          key: 'length'
+        }]
+      }, {
+        value: '4',
+        label: '浼佷笟鍚嶇О',
+        options: [{
+          value: '1',
+          layerName: '鍥哄簾',
+          key: 'pipename',
+          label: '鍏ㄩ儴鍥哄簾'
+        }],
+        labelList: [{
+          label: '杈撻�佷粙璐�',
+          key: 'mediumtype'
+        }, {
+          label: '闀垮害(m)',
+          key: 'length'
+        }]
+      }]
     }
   },
-  props: ['title'],
   methods: {
+    // 鐐瑰嚮鎼滅储瀹炵幇鏁版嵁鐨勬悳绱㈠睍绀�
+    async handleSearch (data) {
+      // console.log(this.form.keyword)
+      const result = await mapApi.getSolidWaste(data)
+      this.searchDataDisplay = result.Result.DataInfo
+      console.log(this.searchDataDisplay)
+    },
+    // 涓嶅悓绫诲瀷鍥剧墖灏佽
+    differentTypes (judgeValue) {
+      var effectOfChange
+      if (judgeValue === 1) {
+        effectOfChange = defaultImg
+      } else {
+        effectOfChange = defaultImg
+      }
+      return effectOfChange
+    },
+    // 鏁版嵁灞曠ず,鐐瑰嚮杩涜寮规鍙婄偣鐨勫睍绀�
+    async setBounced (val) {
+      const pos = [val.Latitude, val.Longitude]
+      window.map.flyTo(pos, 11)
+      // 寰幆閬嶅巻鏁版嵁 鏍规嵁杩涜marker 鐨勫垱寤�
+      // for (let i = 0; i < this.searchDataDisplay.length; i++) {
+      // 缁忕含搴� 浣嶇疆
+      const positionX = val.Latitude
+      const positionY = val.Longitude
+
+      // 瀹氫箟绫诲瀷 鐢ㄦ潵鍖哄垎鏁版嵁鐨勪笉鍚� 1.鎺ュ彛鎺ュ彛鏁版嵁鏉ヨ繘琛屾暟鎹殑鍒ゆ柇 2.鏍规嵁鏁版嵁绫诲瀷鐨勪笉鍚岋紝杩涜涓嶅悓绫诲瀷鐨勫浘鐗囨樉绀�
+      const judgeValue = val.StorageQty
+      var iconUrl = this.differentTypes(judgeValue)
+
+      const marker = this.L.marker([positionX, positionY], {
+        // totransferData: this.searchDataDisplay[i],
+        icon: this.L.icon({
+          iconUrl: iconUrl,
+          iconSize: [30, 30],
+          iconAnchor: [15, 15]
+        })
+      })
+      this.layer.addLayer(marker)
+      // }
+      const t1 = setTimeout(async () => {
+        const dataValue = {
+          StoragePlaceId: val.StoragePlaceId
+        }
+        // 寮规鏍囬
+        const title = val.Name
+        debugger
+        // 鍩烘湰淇℃伅 tabs
+        const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
+        // 璇︾粏淇℃伅灞曠ず table
+        const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)
+
+        // 缁戝畾寮规瀹炰緥
+        this.instance && this.instance.closePopup()
+        const PublicBounced = window.Vue.extend(publicBounced)
+        this.instance = new PublicBounced().$mount()
+        document.body.appendChild(this.instance.$el)
+        // document.body.removeChild(instance.$el)
+        // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹�
+        this.instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
+        this.setPanTo(pos, 250)
+      }, 1000)
+      console.log(t1)
+      // clearTimeout(t1)
+      this.pulseEffect(pos)
+    },
+
+    // flayTo() 寮规鐨勫彲婊戝姩浜嬩欢
+    setPanTo (pos, value) {
+      var position = pos
+      position = window.map.latLngToLayerPoint(position)
+      position.y += value
+      position = window.map.layerPointToLatLng(position)
+      window.map.flyTo(position)
+    },
+    pulseEffect (xy) {
+      // 鎻掍欢 鏁堟灉瀹炵幇
+      var pulsingIcon = this.L.icon.pulse({
+        iconSize: [20, 20],
+        color: this.colors[0],
+        fillColor: ''
+      })
+      var picGroupMarker = this.L.marker(xy, { icon: pulsingIcon }).addTo(this.layer)
+      var times = this.times
+      // 瀹氭椂
+      var timeInterval = setInterval(() => {
+        if (times > 0) {
+          times--
+        } else {
+          clearInterval(timeInterval)
+          picGroupMarker.remove()
+        }
+      }, 1000)
+    },
+    // select鐨刼ption鐨勬暟鎹�夋嫨
     handlePipelineType (val) {
-      this.SolidWasteTypeOptions.forEach((itm) => {
-        if (val === itm.value) {
-          this.dataTypeOptions = itm.options
-          this.form.pipelineType = itm.label
-          this.form.labelList = itm.labelList
+      this.solidWasteTypeOptions.forEach(item => {
+        if (val === item.value) {
+          this.handleSearch(item.value)
         }
       })
-      this.form.dataType = this.dataTypeOptions[0].label
-      this.form.key = this.dataTypeOptions[0].key
-    },
-    handleDataType (val) {
-      this.dataTypeOptions.forEach((itm) => {
-        if (val === itm.value) {
-          this.form.query = itm
-        }
-      })
-    },
-    async handleSearch () {
-      const param = {
-        pipelineType: this.form.pipelineType,
-        dataType: this.form.dataType
-      }
-      console.log(param)
-      var wfsHelper = new WfsHelper()
-      wfsHelper.addTypeName(this.form.query.layerName)
-      wfsHelper.addLike(this.form.query.key, this.form.keyword)
-      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
-      if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
-        this.list = res.data.features
-      }
-    },
-    handleLocation (val) {
-      console.log(val)
-      const bound = this.L.geoJSON([val], {}).getBounds()
-      var layer = window.serviceLayerHelper.getByLayerId(val.id)
-      layer && layer.openPopup()
-      this.$store.state.map.map.flyToBounds(bound)
     }
   }
 }
@@ -142,42 +257,4 @@
 
 <style lang="less" scoped>
 
-.sewers-search {
-  position: relative;
-  overflow: hidden;
-
-  .search-panel {
-    background-color: transparent;
-    border: 1px solid @background-color-split;
-    padding: 10px;
-
-    /deep/ input {
-      border-radius: 0;
-      background-color: @background-color-split;
-      border: solid 1px @color;
-      color: @color-gray;
-      font-size: 0.01rem;
-
-      .el-select .el-input.is-focus .el-input__inner {
-        border-color: @color;
-      }
-    }
-
-    /deep/ input:focus {
-      border-color: @color;
-    }
-  }
-
-  .search-btn {
-
-  }
-
-  //location-btn{
-  //
-  //}
-  .location-btn:hover, .el-input__icon:hover {
-    color: @color;
-    cursor: pointer;
-  }
-}
 </style>

--
Gitblit v1.8.0