fix: 地图坐标转换 --- 高德=>百度 样式细节优化

feat: 新增暂无数据、暂无图片样式、搜索框样式

src/assets/icons/svg/houseNoData.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M514.880452 630.557515L289.843802 383.742193 136.830494 675.585807v80.406889h760.044122c-96.798118-86.070212-300.939144-270.210711-300.939143-270.21071l-81.055021 144.775529z m264.237779-185.757214c42.224941 0 76.426541-35.236442 76.426541-78.768489 0-43.485064-34.202805-78.790174-76.426541-78.790174-42.108085 0-76.332574 35.305111-76.332575 78.790174-0.001205 43.532047 34.224489 78.768489 76.332575 78.768489zM18.070588 97.581176v831.066353h986.895059V97.581176H18.070588z m937.343097 778.223135H71.00416l-0.042165-722.048904H900.120094v0.046984h55.292386l0.001205 722.00192z" /></svg>
\ No newline at end of file

src/components/Layout/index.vue

@@ -30,7 +30,9 @@
             class="hamburger-container"
           />
           <breadcrumb />
-          <async-search class="main-search"></async-search>
+          <div style="width: 100%">
+            <async-search class="main-search"></async-search>
+          </div>
           <el-dropdown class="avatar-container" trigger="click">
             <div class="avatar-wrapper">
               <img v-if="avatar" :src="avatar" class="user-avatar" />
@@ -177,8 +179,7 @@ export default {
   .avatar-container {
     height: 50px;
     display: inline-block;
-    position: absolute;
-    right: 35px;
+    margin: 0 15px
     .avatar-wrapper {
       cursor: pointer;
       margin-top: 5px;
@@ -195,7 +196,7 @@ export default {
       }
       .el-icon-caret-bottom {
         position: absolute;
-        right: -20px;
+        right: -10px;
         top: 25px;
         font-size: 12px;
       }

src/components/mapOverlay/index.vue

@@ -48,16 +48,19 @@
         const lng = this.position.lng
         const lat = this.position.lat
         const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
-        el.style.left = pixel.x - this.width / 2 + 'px'
-        el.style.top = pixel.y - this.height / 2 + 'px'
+        el.style.left = pixel.x - this.overlyWidth / 2 + 'px'
+        el.style.top = pixel.y - this.overlyHeigth / 2 + 'px'
       }
     },
     computed: {
-      style () {
-        return
-      }
+      overlyWidth() {
+        return this.width || 100
+      },
+      overlyHeigth() {
+        return this.height || 20
       }
     }
+    }
 </script>
 
 <style scoped lang="stylus">

src/components/multilHeaderTable/index.vue

@@ -25,7 +25,7 @@
        </el-row>
      </div>
      <div class="table_body" v-if="tableData instanceof Array" :style="{ width: bodyWidth + '%'}">
-       <div class="productionName">
+       <div class="productionName" v-if="tableData.length > 0">
          <el-col :span="24 / tableData.length" v-for="(item,index) in tableData" :key="index" style="min-width: 200px">
            <el-row :class="{'dataCell':true, 'prodName': index < 2}">{{item.productionName}}</el-row>
            <el-col class="productionDetail" :span="24 / item.productionProperties.length" v-for="(item2,index) in item.productionProperties" :key="index">
@@ -41,6 +41,12 @@
            </el-col>
          </el-col>
        </div>
+       <div v-else style="height: 100%;display: flex;align-items: center;">
+         <div style="width: 100%;text-align: center;margin: auto">
+           <svg-icon icon-class="houseNoData" style="width: 200px;height: 200px" />
+           <div>暂无数据</div>
+         </div>
+       </div>
      </div>
      <div class="table_body" v-else :style="{ width: bodyWidth + '%'}">
        <el-col :span="24" style="min-width: 120px">

src/router/index.js

@@ -30,14 +30,14 @@ let routes = [
   {
     path: '/regionalPlate',
     hidden: false,
-    meta: { title: '户型查询', icon: 'el-icon-discover' },
+    meta: { title: '板块&区域', icon: 'el-icon-discover' },
     component: Layout,
     children: [
       {
         path: '/regionalPlate',
         name: 'regionalPlate',
         hidden: false,
-        meta: { title: '户型查询' },
+        meta: { title: '板块&区域' },
         component: () => import('@/views/RegionalPlate/index.vue'),
       }
     ]

src/views/ProductAnalysis/index.vue

@@ -63,53 +63,61 @@
      </div>
    </div>
    <el-card :body-style="{padding: '0'}">
-     <div class="supplyDealCharts" v-if="showMode === 0">
-       <div style="width: 50%">
-         <ve-pie :data="pieData" :legend="{ bottom: 20 }" :colors="colorsArr" :settings="pieSettings"></ve-pie>
-         <!--       各产品 供应套数与详细信息表格-->
-         <table cellspacing="0" cellpadding="0" class="table">
-           <tr>
-             <th>产品类型</th>
-             <th>产品供应数量</th>
-             <th>开间数</th>
-             <th>居室数</th>
-             <th>厅数</th>
-             <th>卫生间数</th>
-           </tr>
-           <tr v-for="item in pieData.rows">
-             <td>{{item.productionPie}}</td>
-             <td>{{item.supplication}}</td>
-             <td>{{item.kjNum || 0}}</td>
-             <td>{{item.jsNum || 0}}</td>
-             <td>{{item.tingNum || 0}}</td>
-             <td>{{item.wsjNum || 0}}</td>
-           </tr>
-         </table>
+     <div class="container" v-if="showMode === 0">
+       <div class="noData"  style="height: 500px;display: flex;align-items: center;justify-content: center"
+            v-if="pieData.rows.length === 0 && histogramData.rows.length === 0 &&productionProjectData.length === 0">
+         <svg-icon icon-class="noData" style="width: 250px;height: 250px"></svg-icon>
        </div>
-       <div style="width: 50%">
-         <ve-histogram :data="histogramData" :extend="extend" :legend="{ bottom: 20 }" :colors="colorsArr" :settings="chartSettings"></ve-histogram>
-         <!--       各房屋 面宽表格详情-->
-         <table cellspacing="0" cellpadding="0" class="table">
-           <tr>
-             <th>产品类型</th>
-             <th>南向面宽</th>
-             <th>起居室面宽</th>
-             <th>主卧面宽</th>
-             <th>客卧面宽</th>
-           </tr>
-           <tr v-for="item in histogramTableData">
-             <td>{{item.production}}</td>
-             <td>{{item.nxmkAvg}}</td>
-             <td>{{item.qjsmkAvg || 0}}</td>
-             <td>{{item.zwmkAvg || 0}}</td>
-             <td>{{item.kwmkAvg || 0}}</td>
-           </tr>
-         </table>
+       <div v-else>
+         <div class="supplyDealCharts">
+           <div style="width: 50%">
+             <ve-pie :data="pieData" :legend="{ bottom: 20 }" :colors="colorsArr" :settings="pieSettings"></ve-pie>
+             <!--       各产品 供应套数与详细信息表格-->
+             <table cellspacing="0" cellpadding="0" class="table">
+               <tr>
+                 <th>产品类型</th>
+                 <th>产品供应数量</th>
+                 <th>开间数</th>
+                 <th>居室数</th>
+                 <th>厅数</th>
+                 <th>卫生间数</th>
+               </tr>
+               <tr v-for="item in pieData.rows">
+                 <td>{{item.productionPie}}</td>
+                 <td>{{item.supplication}}</td>
+                 <td>{{item.kjNum || 0}}</td>
+                 <td>{{item.jsNum || 0}}</td>
+                 <td>{{item.tingNum || 0}}</td>
+                 <td>{{item.wsjNum || 0}}</td>
+               </tr>
+             </table>
+           </div>
+           <div style="width: 50%">
+             <ve-histogram :data="histogramData" :extend="extend" :legend="{ bottom: 20 }" :colors="colorsArr" :settings="chartSettings"></ve-histogram>
+             <!--       各房屋 面宽表格详情-->
+             <table cellspacing="0" cellpadding="0" class="table">
+               <tr>
+                 <th>产品类型</th>
+                 <th>南向面宽</th>
+                 <th>起居室面宽</th>
+                 <th>主卧面宽</th>
+                 <th>客卧面宽</th>
+               </tr>
+               <tr v-for="item in histogramTableData">
+                 <td>{{item.production}}</td>
+                 <td>{{item.nxmkAvg}}</td>
+                 <td>{{item.qjsmkAvg || 0}}</td>
+                 <td>{{item.zwmkAvg || 0}}</td>
+                 <td>{{item.kwmkAvg || 0}}</td>
+               </tr>
+             </table>
+           </div>
+         </div>
+         <div class="supplyAnalysisTable" v-if="showMode === 0">
+           <multi-header-table :header-width="42" :body-width="58" :header-data="headerTable" :table-data="productionProjectData"></multi-header-table>
+         </div>
        </div>
      </div>
-     <div class="supplyAnalysisTable" v-if="showMode === 0">
-       <multi-header-table :header-width="42" :body-width="58" :header-data="headerTable" :table-data="productionProjectData"></multi-header-table>
-     </div>
      <div v-if="showMode === 1" class="supplyDealUnitType">
        <div class="mainUnit blueBorder"  v-for="(item, index) in unitHouseTypeData" :key="index">
          <h2 class="unitHeader" style="padding: 0 15px">{{item.productGroupName}}</h2>
@@ -126,6 +134,12 @@
            :total="item.children.length">
          </el-pagination>
        </div>
+       <div v-if="unitHouseTypeData.length === 0" style="height: 500px;display: flex;align-items: center">
+         <div style="width: 50%;text-align: center;margin: auto">
+           <svg-icon icon-class="houseNoData" style="width: 200px;height: 200px" />
+           <div>暂无数据</div>
+         </div>
+       </div>
      </div>
    </el-card>
  </section>
@@ -377,7 +391,7 @@
             this.regionVal = plateAnalysisQuery.adminRegion ? plateAnalysisQuery.adminRegion : ''
             this.plateVal = plateAnalysisQuery.regionId ? plateAnalysisQuery.regionId : ''
             this.timeVal = plateAnalysisQuery.year ? plateAnalysisQuery.year: new Date().getFullYear()
-            this.areaInterval = plateAnalysisQuery.unitArea ? plateAnalysisQuery.unitArea.areaMin + '-' + plateAnalysisQuery.unitArea.areaMax : '0-70'
+            this.areaInterval = plateAnalysisQuery.areaVal ? plateAnalysisQuery.areaVal : '0-70'
           } else {
             res.data.forEach(item => {
               if(!this.plateMap[item.adminRegionId]) {
@@ -388,6 +402,7 @@
                 this.regionVal = item.adminRegionId
                 this.plateVal = item.resultRegionDTOS[0].regionId
                 this.timeVal = new Date().getFullYear()
+                this.areaInterval = '0-70'
               }
             })
           }
@@ -412,7 +427,9 @@
           } else {
             this.houseTypeVal = res.data[0] ? res.data[0].businessId : '0-70'
           }
-         callback()
+          if(callback) {
+            callback()
+          }
         })
       },
       // 获取户型信息----产品户型图与图片
@@ -427,6 +444,20 @@
           areaMax: this.areaInterval.split('-')[1]
           }
         }
+        // 处理后的格式
+        // [
+        //      {
+        //        produtGroupName: '产品组名',
+        //        children: [
+        //          {
+        //            unitHouse: '几室几厅几卫',
+        //            unitName: '楼盘名',
+        //            unitArea: "房屋面积",
+        //            fileUrl: '户型图url'
+        //          }
+        //        ]
+        //      }
+        // ]
         plateAnalysisHouseImg(temp).then(res => {
           let productionList = []
           let pageList = []
@@ -458,6 +489,13 @@
           this.pageList = pageList
           this.unitHouseTypeData = productionList
           // 假分页
+          // 格式
+          // {
+          //   '产品组名': {
+          //      'page1': Array(6)
+          //   }
+          // }
+          // 注意截取数组不要用splice 要用slice
           const productionListCopy = JSON.parse(JSON.stringify(productionList))
           productionListCopy.forEach(item => {
             if(!this.pageListMap[item.productGroupName]) {
@@ -496,16 +534,15 @@
       })
     },
     beforeDestroy() {
-      sessionStorage.setItem('plateAnalysisQuery', JSON.stringify({
-        adminRegion: this.regionVal,
-        regionId: this.plateVal,
-        year: this.timeVal,
-        productType: this.houseTypeVal,
-        unitArea: {
-          areaMin: this.areaInterval.split('-')[0],
-          areaMax: this.areaInterval.split('-')[1]
-        }
-      }))
+      if(this.regionVal && this.plateVal) {
+        sessionStorage.setItem('plateAnalysisQuery', JSON.stringify({
+          adminRegion: this.regionVal,
+          regionId: this.plateVal,
+          year: this.timeVal,
+          productType: this.houseTypeVal,
+          areaVal: this.areaInterval
+        }))
+      }
     }
   }
 </script>

src/views/plateSupplyData/index.vue

@@ -145,7 +145,7 @@
               show: true,
               position: "top",
               formatter:function(params){ //标签内容
-                if(params.data == 0) { return '0' }
+                if(params.data == 0) { return '' }
                 return (params.data * 100 ).toFixed(0) + '%'
               }
             }
@@ -160,7 +160,7 @@
               position: "top",
               formatter:function(params){ //标签内容
                 console.log(params.data, 'sssssssssssssssssss')
-                if(params.data == 0) { return '0' }
+                if(params.data == 0) { return '' }
                 return params.data.toFixed(2)
               }
             }

src/views/propertiesDetail/index.vue

@@ -279,7 +279,7 @@
               show: true,
               position: "top",
               formatter:function(params){ //标签内容
-                if(params.data == 0) { return '0' }
+                if(params.data == 0) { return '' }
                 return params.data.toFixed(2)
               }
             }
@@ -293,7 +293,7 @@
               show: true,
               position: "top",
               formatter:function(params){ //标签内容
-                if(params.data == 0) { return '0' }
+                if(params.data == 0) { return '' }
                 return (params.data * 100 ).toFixed(0) + '%'
               }
             }
@@ -453,7 +453,11 @@
         queryAnalysisById(this.propertyId).then(res => {
           console.log(JSON.stringify(res.data))
           // 饼图图表数据
-          this.houseUnitCharts.rows = res.data.pieDetilDtoList
+          res.data.pieDetilDtoList.forEach(item => {
+            if(item.supplication && item.supplication > 0) {
+              this.houseUnitCharts.rows.push(item)
+            }
+          })
           // 饼图表格数据
           this.houseUnitTable = res.data.pieDetilTableList
           this.houseWidthTable = res.data.barDetilDtoList