feat: 板块供求数据、板块产品分析四个图表的接口对接 下拉框的变化传值

fix: 搜索框传值改为字符串 防止报错 细节优化

src/assets/js/api/projectManage.js

+import xhr from '@utils/http'
+
+// 板块产品分析-可视化图表数据
+export function plateAnalysis(data) {
+  return xhr.post('/bnsproject/bns-project/withProjectAndProduct/getRegionProduct', data)
+}
+// 板块产品分析-显示户型信息
+export function plateAnalysisHouseImg(data) {
+  return xhr.post('/bnsproject/bns-project/withProjectAndProduct/getRegionProductImg', data)
+}
+// 导出数据
+export function exportExcel(data) {
+  return xhr.downloadFile('/bnsproject/bns-project/withProjectAndProduct/getRegionProductJson', data)
+}
+// 查询产品类型
+export function queryProductionType(type) {
+  return xhr.get('/bnsproject/bns-project/withProjectAndProduct/allProperty', {
+    type
+  })
+}

src/assets/js/api/unitManage.js

@@ -20,7 +20,6 @@ export function queryPlateByRegion(param) {
 }
 // 楼盘详情查询
 export function queryPropertyDetail(id) {
-  console.log(id)
   return xhr.get('/bnsproject/bns-project/withProjectAndProduct/selectDetils/'+ id)
 }
 // 根据楼盘Id查询楼盘销售信息---供求数据

src/components/asyncSearch/index.vue

@@ -80,7 +80,7 @@
            }
            window.eventBus.$emit('searchParamChange', {
               type: res.data.flag,
-              data: result
+              data: JSON.stringify(result)
            })
           })
         }

src/components/houseDetailForm/header.js

+export function headerTable() {
+  return [
+    {
+      type: 'function',
+      name: '产品组',
+      height: '300px'
+    },
+    {
+      type: 'description',
+      name: '户型描述',
+      height: '55px'
+    },
+    {
+      type: 'function',
+      name: '开间数',
+      height: '50px'
+    },
+    {
+      type: 'function',
+      name: '居室数',
+      height: '50px'
+    },
+    {
+      type: 'function',
+      name: '厅数',
+      height: '50px'
+    },
+    {
+      type: 'function',
+      name: '卫生间',
+      height: '50px'
+    },
+    {
+      type: 'description',
+      name: '户型面宽',
+      height: '55px'
+    },
+    {
+      type: 'function',
+      name: '南向面宽',
+      height: '50px'
+    },
+    {
+      type: 'function',
+      name: '起居室面宽',
+      height: '50px'
+    },
+    {
+      type: 'function',
+      name: '主卧面宽',
+      height: '50px'
+    },   {
+      type: 'function',
+      name: '客卧面宽',
+      height: '50px'
+    },
+    {
+      type: 'description',
+      name: '户型功能',
+      height: '55px'
+    },
+  ]
+}

src/components/houseDetailForm/index.vue

+<template>
+  <div class="hoseDetailForm">
+    <div class="tableHeader">
+
+    </div>
+    <div class="container">
+
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'hoseDetailForm'
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/ProductAnalysis/unitArea.js

+export const unitArea = [
+  {
+    value: '0-70',
+    label: '70以下'
+  },
+  {
+    value: '70-80',
+    label: '70-80'
+  },
+  {
+    value: '80-90',
+    label: '80-90'
+  },
+  {
+    value: '90-100',
+    label: '90-100'
+  },
+  {
+    value: '100-110',
+    label: '100-110'
+  },
+  {
+    value: '110-120',
+    label: '110-120'
+  },
+  {
+    value: '120-130',
+    label: '120-130'
+  },
+  {
+    value: '130-140',
+    label: '130-140'
+  },
+  {
+    value: '140-150',
+    label: '140-150'
+  },
+  {
+    value: '150-160',
+    label: '150-160'
+  },
+  {
+    value: '160-170',
+    label: '160-170'
+  },
+  {
+    value: '170-180',
+    label: '170-180'
+  },
+  {
+    value: '180-190',
+    label: '180-190'
+  },
+  {
+    value: '190-200',
+    label: '190-200'
+  },
+  {
+    value: '200-10000',
+    label: '200以上'
+  },
+]

src/views/RegionalPlate/index.vue

@@ -292,16 +292,18 @@
          const searchResult = this.$route.query
          if(searchResult.type === 'plateRegion') {
            this.showType = 'plateRegion'
-           this.map.center.lng = searchResult.data.longitude
-           this.map.center.lat = searchResult.data.latitude
+           const resultData = JSON.parse(searchResult.data)
+           this.map.center.lng = resultData.longitude
+           this.map.center.lat = resultData.latitude
            this.map.setZoom = this.zoomType.plateRegion
-           this.dataType.plateRegion = searchResult.data
+           this.dataType.plateRegion = resultData
          } else {
            this.showType = 'property'
-           this.map.center.lng = averagePosition(searchResult.data).longitude
-           this.map.center.lat = averagePosition(searchResult.data).latitude
+           const resultData = JSON.parse(searchResult.data)
+           this.map.center.lng = averagePosition(resultData).longitude
+           this.map.center.lat = averagePosition(resultData).latitude
            this.map.setZoom = this.zoomType.property
-           this.dataType.property = searchResult.data
+           this.dataType.property = resultData
            this.propertyDetailData = this.dataType.property[0]
          }
        } else {
@@ -322,17 +324,19 @@
       window.eventBus.$on('searchParamChange', (searchResult) => {
         if(searchResult.type === 'plateRegion') {
           this.showType = 'plateRegion'
-          this.map.center.lng = searchResult.data.longitude
-          this.map.center.lat = searchResult.data.latitude
+          const resultDetail = JSON.parse(searchResult.data) || {}
+          this.map.center.lng = resultDetail.longitude
+          this.map.center.lat = resultDetail.latitude
           this.map.setZoom = this.zoomType.plateRegion
-          this.dataType.plateRegion = searchResult.data
+          this.dataType.plateRegion = resultDetail
           this.detailShow = true
         } else {
           this.showType = 'property'
-          this.map.center.lng = averagePosition(searchResult.data).longitude
-          this.map.center.lat = averagePosition(searchResult.data).latitude
+          const resultDetail = JSON.parse(searchResult.data) || {}
+          this.map.center.lng = averagePosition(resultDetail).longitude
+          this.map.center.lat = averagePosition(resultDetail).latitude
           this.map.setZoom = this.zoomType.property
-          this.dataType.property = searchResult.data
+          this.dataType.property = resultDetail
           this.propertyDetailData = this.dataType.property[0]
           this.detailShow = true
         }

src/views/plateSupplyData/areaRangeMap.js

+export const areaRangeMap = {
+  '1.00-70.00': '70以下',
+  '70.00-80.00': '70-80',
+  '80.00-90.00': '80-90',
+  '90.00-100.00': '90-100',
+  '100.00-110.00': '100-110',
+  '110.00-120.00': '110-120',
+  '120.00-130.00': '120-130',
+  '130.00-140.00': '130-140',
+  '140.00-150.00': '140-150',
+  '150.00-160.00': '150-160',
+  '160.00-170.00': '160-170',
+  '170.00-180.00': '170-180',
+  '180.00-190.00': '180-190',
+  '190.00-200.00': '190-200',
+  '200.00-10000.00': '200以上'
+}

src/views/plateSupplyData/index.vue

@@ -68,6 +68,7 @@
 <script>
   import { getSupplyNumData, getRegionPlate, exportSupplyData  } from "../../assets/js/api/plateSupplyManage";
   import { colors } from "../../components/color";
+  import { areaRangeMap } from "./areaRangeMap";
   export default {
     name: "ProductAnalysis",
     data () {
@@ -135,11 +136,13 @@
         },
         extend: {
           series: {
+            type: 'bar',
             barWidth: 30
           }
         },
-        exportSaveStatus: [],  // 请求数据后保存 导出时用
+        exportSaveStatus: [],  // 请求数据后保存导出时用
         exportLoading: false, // 导出按钮loading
+
       }
     },
     methods: {
@@ -155,13 +158,13 @@
              const link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
-             link.setAttribute('download', `${this.regionVal}区${this.plateVal}板块${this.timeVal}年份供求信息`) // 自定义下载文件名（如exemple.txt）
+             link.setAttribute('download', `${this.regionVal}区${this.plateVal}板块${this.timeVal}年份供求信息`) // 自定义下载文件名
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
              this.$message({
                type: 'success',
-               message: '正在下载'
+               message: '导出完成'
              })
              this.exportLoading = false
            } else {
@@ -175,41 +178,46 @@
            this.exportLoading = false
          })
       },
-      // yaxisDataDeal(rateArray) {
-      //  let result = rateArray.sort((a,b) => {
-      //     return b-a
-      //   }).filter(item => {
-      //     return item > 1
-      //   }).map(item => {
-      //     return Math.ceil(item)
-      //  })
-      //  const arr = []
-      //  for(let i = Math.max(...result); i>=0; i--) {
-      //    arr.push(i)
-      //  }
-      //  return arr
-      // },
       // 根据区域-板块名-年份获取供求信息
       getSupplyData () {
         getSupplyNumData(this.regionVal,this.plateVal,this.timeVal).then(res => {
-          this.exportSaveStatus = JSON.stringify(res.data)
-          const areaRange = []
-          const supplyNum = []
-          const dealNum = []
-          const rate = []
-          this.chartData.rows = res.data
-          this.chartData2.rows = res.data
-          res.data.forEach(item => {
-            areaRange.push(item.areaRange)
-            supplyNum.push(item.suplyNumber)
-            dealNum.push(item.dealNumber)
-            rate.push(item.rate)
-          })
-          this.supplyData.areaRange.data = areaRange
-          this.supplyData.supplyNum.data = supplyNum
-          this.supplyData.dealNum.data = dealNum
-          this.supplyRateData.areaRange.data = areaRange
-          this.supplyRateData.Rate.data = rate
+          if(res.data) {
+            let exportList = []
+            let supplyChartsData = [] // 供求百分比 图表数据
+            let supplyDealRate = [] //供求比图表数据
+            let rate = [] // 供求比
+            let supplyNumber = [] // 供应套数
+            let dealNumber = [] // 成交套数
+            let areaRange = [] // 面积区间
+            Object.keys(areaRangeMap).forEach(key => {
+              supplyChartsData.push({
+                areaRange: areaRangeMap[key],
+                supplyProportion: res.data[key] ?  (res.data[key].supplyProportion || 0) : 0,
+                dealProportion: res.data[key] ? (res.data[key].dealProportion || 0) : 0
+              })
+              supplyDealRate.push({
+                areaRange: areaRangeMap[key],
+                rate: res.data[key] ? (res.data[key].rate || 0) : 0
+              })
+              areaRange.push(areaRangeMap[key])
+              rate.push(res.data[key] ? (res.data[key].rate || 0) : 0)
+              supplyNumber.push(res.data[key] ? (res.data[key].supplyNumber || 0) : 0)
+              dealNumber.push(res.data[key] ? (res.data[key].dealNumber || 0) : 0)
+              exportList.push({
+                areaRange: areaRangeMap[key],
+                supplyNumber: res.data[key] ? (res.data[key].supplyNumber || 0) : 0,
+                dealNumber: res.data[key] ? (res.data[key].dealNumber || 0) : 0
+              })
+            })
+            this.chartData.rows = supplyChartsData
+            this.chartData2.rows = supplyDealRate
+            this.supplyData.areaRange.data = areaRange
+            this.supplyData.dealNum.data = dealNumber
+            this.supplyData.supplyNum.data = supplyNumber
+            this.supplyRateData.areaRange.data = areaRange
+            this.supplyRateData.Rate.data = rate
+            this.exportSaveStatus = JSON.stringify(exportList)
+          }
         })
       },
       regionToPlate (region) {
@@ -222,7 +230,7 @@
       }
     },
     mounted() {
-      for(let i = 2000; i<= 2020; i++) {
+      for(let i = new Date().getFullYear(); i>= 2000; i--) {
         this.timeOptions.push({
           value: i,
           label: i + '年'
@@ -234,21 +242,29 @@
           const regionVal = JSON.parse(sessionStorage.getItem('supplyQuery')).regionVal
           const plateVal = JSON.parse(sessionStorage.getItem('supplyQuery')).plateVal
           const timeVal = JSON.parse(sessionStorage.getItem('supplyQuery')).timeVal
-          this.regionVal = regionVal
-          this.plateVal = plateVal
-          this.timeVal = timeVal
+          res.data.forEach(item => {
+            if(!this.plateMap[item.adminRegionName]) {
+              this.plateMap[item.adminRegionName] = item.resultRegionDTOS
+            }
+            if (item.adminRegionName === regionVal) {
+              this.plateOptions = item.resultRegionDTOS
+            }
+          })
+          this.regionVal = regionVal ? regionVal : ''
+          this.plateVal = plateVal ? plateVal : ''
+          this.timeVal = timeVal ? timeVal: new Date().getFullYear()
+        } else {
+          res.data.forEach(item => {
+            if(!this.plateMap[item.adminRegionName]) {
+              this.plateMap[item.adminRegionName] = item.resultRegionDTOS
+            }
+            if(item.resultRegionDTOS && item.resultRegionDTOS.length > 0 && !this.regionVal && !this.plateVal) {
+              this.plateOptions = item.resultRegionDTOS
+              this.regionVal = item.adminRegionName
+              this.plateVal = item.resultRegionDTOS[0].regionName
+            }
+          })
         }
-        res.data.forEach(item => {
-          if(!this.plateMap[item.adminRegionName]) {
-            this.plateMap[item.adminRegionName] = item.resultRegionDTOS
-          }
-          if(item.resultRegionDTOS && item.resultRegionDTOS.length > 0 && !this.regionVal && !this.plateVal && !this.timeVal) {
-            this.plateOptions = item.resultRegionDTOS
-            this.regionVal = item.adminRegionName
-            this.plateVal = item.resultRegionDTOS[0].regionName
-            this.timeVal = 2020
-          }
-        })
         this.getSupplyData()
       })
     },

src/views/propertiesDetail/index.vue

@@ -102,7 +102,7 @@
               </tr>
             </table>
 <!--            供求比提示信息-->
-            <div class="tips">注：供求比=供应数量/销售数量，供应比越小，销售越好</div>
+            <div class="tips" style="color: red">注：供求比=供应数量/销售数量，供应比越小，销售越好</div>
           </el-col>
         </el-row>
         <el-row>
@@ -165,6 +165,7 @@
   import planningInfoMap from "./planningInfoMap";
   import { propertyMapFunction } from "./propertyFunctionMap";
   import { queryPropertyDetail, queryPropertySupplyData } from "../../assets/js/api/unitManage";
+  import { areaRangeMap } from "../plateSupplyData/areaRangeMap";
   export default {
     name: "propertiesDetail",
     components: {banner, multiHeaderTable},
@@ -377,23 +378,36 @@
       },
       getPropertySupplyData () {
          queryPropertySupplyData(this.propertyId).then(res => {
-           const areaRange = []
-           const supplyNum = []
-           const dealNum = []
-           const rate = []
-           this.supplySaleData.rows = res.data
-           this.supplyDemandRatioData.rows = res.data
-           res.data.forEach(item => {
-             areaRange.push(item.areaRange)
-             supplyNum.push(item.suplyNumber)
-             dealNum.push(item.dealNumber)
-             rate.push(item.rate)
-           })
-           this.supplySaleDataDetail.areaRange.data = areaRange
-           this.supplySaleDataDetail.supplyNum.data = supplyNum
-           this.supplySaleDataDetail.dealNum.data = dealNum
-           this.supplyDemandRatioDataDetail.areaRange.data = areaRange
-           this.supplyDemandRatioDataDetail.rate.data = rate
+           if(res.data) {
+             let supplyChartsData = [] // 供求百分比 图表数据
+             let supplyDealRate = [] //供求比图表数据
+             let rate = [] // 供求比
+             let supplyNumber = [] // 供应套数
+             let dealNumber = [] // 成交套数
+             let areaRange = [] // 面积区间
+             Object.keys(areaRangeMap).forEach(key => {
+               supplyChartsData.push({
+                 areaRange: areaRangeMap[key],
+                 supplyProportion: res.data[key] ?  (res.data[key].supplyProportion || 0) : 0,
+                 dealProportion: res.data[key] ? (res.data[key].dealProportion || 0) : 0
+               })
+               supplyDealRate.push({
+                 areaRange: areaRangeMap[key],
+                 rate: res.data[key] ? (res.data[key].rate || 0) : 0
+               })
+               areaRange.push(areaRangeMap[key])
+               rate.push(res.data[key] ? (res.data[key].rate || 0) : 0)
+               supplyNumber.push(res.data[key] ? (res.data[key].supplyNumber || 0) : 0)
+               dealNumber.push(res.data[key] ? (res.data[key].dealNumber || 0) : 0)
+             })
+             this.supplySaleData.rows = supplyChartsData
+             this.supplyDemandRatioData.rows = supplyDealRate
+             this.supplySaleDataDetail.areaRange.data = areaRange
+             this.supplySaleDataDetail.dealNum.data = dealNumber
+             this.supplySaleDataDetail.supplyNum.data = supplyNumber
+             this.supplyRateData.areaRange.data = areaRange
+             this.supplyRateData.Rate.data = rate
+           }
          })
       }
     },