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/index.vue

@@ -8,22 +8,22 @@
            v-for="item in regionOptions"
            :key="item.adminRegionId"
            :label="item.adminRegionName"
-           :value="item.adminRegionName">
+           :value="item.adminRegionId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
-       <el-select v-model="plateVal" placeholder="板块名">
+       <el-select v-model="plateVal" @change="getPlateAnalysisData" placeholder="板块名">
          <el-option
            v-for="item in plateOptions"
            :key="item.regionId"
            :label="item.regionName"
-           :value="item.regionName">
+           :value="item.regionId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
-       <el-select v-model="timeVal" placeholder="年份">
+       <el-select v-model="timeVal" placeholder="年份" @change="getPlateAnalysisData">
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
@@ -33,17 +33,17 @@
        </el-select>
      </el-col>
      <el-col :span="4">
-       <el-select v-model="houseTypeVal" placeholder="类型">
+       <el-select v-model="houseTypeVal" @change="getPlateAnalysisData" placeholder="类型">
          <el-option
            v-for="item in houseTypeOptions"
-           :key="item.value"
-           :label="item.label"
-           :value="item.value">
+           :key="item.businessId"
+           :label="item.name"
+           :value="item.businessId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
-       <el-select v-model="areaInterval" placeholder="面积区间">
+       <el-select v-model="areaInterval" @change="getPlateAnalysisData" placeholder="面积区间">
          <el-option
            v-for="item in areaIntervalData"
            :key="item.value"
@@ -59,6 +59,9 @@
        </el-radio-group>
      </el-col>
    </div>
+   <el-row style="text-align: right;margin: 20px 0">
+     <el-button type="primary" size="small" :loading="exportLoading" :disabled="exportLoading" @click="exportPlateAnalysis">导出数据</el-button>
+   </el-row>
    <div class="supplyDealCharts" v-if="showMode === 0">
      <div style="width: 50%">
        <ve-pie :data="pieData" :legend="{ bottom: 20 }" :colors="colorsArr" :settings="pieSettings"></ve-pie>
@@ -73,7 +76,7 @@
            <th>卫生间数</th>
          </tr>
          <tr v-for="item in pieData.rows">
-           <td>{{item.production}}</td>
+           <td>{{item.productionPie}}</td>
            <td>{{item.supplication}}</td>
            <td>{{item.kjNum || 0}}</td>
            <td>{{item.jsNum || 0}}</td>
@@ -83,7 +86,7 @@
        </table>
      </div>
      <div style="width: 50%">
-       <ve-histogram :data="histogramData" :legend="{ bottom: 20 }" :colors="colorsArr" :settings="chartSettings"></ve-histogram>
+       <ve-histogram :data="histogramData" :extend="extend" :legend="{ bottom: 20 }" :colors="colorsArr" :settings="chartSettings"></ve-histogram>
 <!--       各房屋 面宽表格详情-->
        <table cellspacing="0" cellpadding="0" class="table">
          <tr>
@@ -144,6 +147,9 @@
   import multiHeaderTable from '@comp/multilHeaderTable'
   import { demoData } from "./tableHeader";
   import { getRegionPlate } from "../../assets/js/api/plateSupplyManage";
+  import { unitArea } from "./unitArea";
+  import {plateAnalysis, queryProductionType} from "../../assets/js/api/projectManage";
+
   export default {
     name: "ProductAnalysis",
     components:{
@@ -153,26 +159,19 @@
     data () {
       return {
         pieData: {
-          columns: ['production', 'supplication'],
-          rows: [
-            { 'production': '产品1', 'supplication': 1393, kjNum: 1, jsNum: 2, tingNum: 3, wsjNum: 2 },
-            { 'production': '产品2', 'supplication': 3530, kjNum: 2, jsNum: 3, tingNum: 5, wsjNum: 4 },
-            { 'production': '产品3', 'supplication': 2923, kjNum: 4, jsNum: 1, tingNum: 1, wsjNum: 3 }
-          ]
+          columns: ['productionPie', 'supplication'],
+          rows: []
         },
         pieSettings: {
           labelMap: {
-            production: '产品类型',
+            productionPie: '产品类型',
             supplication: '产品提供数'
           }
         },
         histogramData: {
-          columns: ['rommInfo', 'proNumOne', 'proNumTwo', 'proNumThree'],
+          columns: ['roomInfo'],
           rows: [
-            { 'rommInfo': '南向面宽', 'proNumOne': 10.1, 'proNumTwo': 10.8, 'proNumThree': 8.9 },
-            { 'rommInfo': '起居室面宽', 'proNumOne': 10.5, 'proNumTwo': 10.7, 'proNumThree': 4.5 },
-            { 'rommInfo': '主卧面宽', 'proNumOne': 15, 'proNumTwo': 12, 'proNumThree': 0 },
-            { 'rommInfo': '客卧面宽', 'proNumOne': 13, 'proNumTwo': 19, 'proNumThree': 10 }
+            { 'roomInfo': '南向面宽' }
           ]
         },
         map: {
@@ -181,37 +180,15 @@
           'zwmk': '主卧面宽',
           'kwmk': '客卧面宽'
         }, // 房屋数据 map匹配
-        histogramTableData: [
-          {
-            production: '产品1',
-            nxmk: 10.1,
-            qjsmk: 10.5,
-            zwmk: 15,
-            kwmk: 13
-          },
-          {
-            production: '产品2',
-            nxmk: 8.9,
-            qjsmk: 4.5,
-            zwmk: 0,
-            kwmk: 10
-          },
-          {
-            production: '产品3',
-            nxmk: 10.1,
-            qjsmk: 10.5,
-            zwmk: 15,
-            kwmk: 13
-          }
-          ],
+        histogramTableData: [],
         chartSettings : {
           axisSite: { right: ['下单率'] },
-          yAxisType: ['normal'],
-          labelMap: {
-            roomInfo: '面宽类型',
-            proNumOne: '产品1',
-            proNumTwo: '产品2',
-            proNumThree: '产品3'
+          yAxisType: ['normal']
+        },
+        extend: {
+          series: {
+            type: 'bar',
+            barWidth: 30
           }
         },
         regionOptions: [],
@@ -219,20 +196,24 @@
         plateOptions: [],
         plateVal: '',
         timeOptions: [],
-        timeVal: 2020,
+        timeVal: '',
         houseTypeOptions: [],
         houseTypeVal: '',
-        areaInterval: '',
-        areaIntervalData: [],
+        areaInterval: '0-70',
+        areaIntervalData: unitArea,
         showMode: 0,
         colorsArr: colors,
         headerTable: tableHeader,
         plateMap: {
 
-        }
+        },
+        exportLoading: false
       }
     },
     methods: {
+      exportPlateAnalysis () {
+
+      },
       changePlateForRegion (region) {
         this.plateVal = ''
         if(this.plateMap[region] && this.plateMap[region].length > 0) {
@@ -240,6 +221,84 @@
         } else {
           this.plateOptions = []
         }
+      },
+      getPlateAnalysisData() {
+        // let temp = {
+        //   adminRegion: this.regionVal,
+        //   regionId: this.plateVal,
+        //   year: this.timeVal,
+        //   productType: this.houseTypeVal,
+        //   unitArea: {
+        //     areaMin: this.areaInterval.split('-')[0],
+        //     areaMax: this.areaInterval.split('-')[1]
+        //   }
+        // }
+        plateAnalysis().then(res => {
+          this.pieData.rows = res.data.pieDetilProductDtoList || []
+          this.histogramTableData = res.data.barDetilDtoList || []
+          // 处理 面宽数据 格式： { roomInfo: '南向面宽', '产品1': num, '产品2': num2  }
+          let histomData = []
+          let colum = ['roomInfo']
+          Object.keys(this.map).forEach(key => {
+            let singleData = {}
+            res.data.barDetilDtoList.forEach(item => {
+              if(colum.length - 1 !== res.data.barDetilDtoList.length) {
+                colum.push(item.production)
+              }
+              if(!singleData.roomInfo) {
+                singleData.roomInfo = this.map[key]
+              }
+              singleData[item.production] = item[key]
+            })
+            histomData.push(singleData)
+          })
+          this.histogramData.columns = colum
+          this.histogramData.rows = histomData
+        })
+      },
+      getRegionAndPlate() {
+        getRegionPlate().then(res => {
+          this.regionOptions = res.data
+          const plateAnalysis = sessionStorage.getItem('plateAnalysisQuery')
+          const plateAnalysisQuery = JSON.parse(plateAnalysis)
+          if(plateAnalysisQuery && plateAnalysisQuery.adminRegion && plateAnalysisQuery.regionId) {
+            res.data.forEach(item => {
+              if(!this.plateMap[item.adminRegionId]) {
+                this.plateMap[item.adminRegionId] = item.resultRegionDTOS
+              }
+              if (item.adminRegionId === plateAnalysisQuery.adminRegion) {
+                console.log(item.resultRegionDTOS)
+                this.plateOptions = item.resultRegionDTOS
+              }
+            })
+            this.regionVal = plateAnalysisQuery.adminRegion ? plateAnalysisQuery.adminRegion : ''
+            this.plateVal = plateAnalysisQuery.regionId ? plateAnalysisQuery.regionId : ''
+            this.timeVal = plateAnalysisQuery.year ? plateAnalysisQuery.year: new Date().getFullYear()
+          } else {
+            res.data.forEach(item => {
+              if(!this.plateMap[item.adminRegionId]) {
+                this.plateMap[item.adminRegionId] = item.resultRegionDTOS
+              }
+              if(item.resultRegionDTOS && item.resultRegionDTOS.length > 0) {
+                this.plateOptions = item.resultRegionDTOS
+                this.regionVal = item.adminRegionId
+                this.plateVal = item.resultRegionDTOS[0].regionId
+                this.timeVal = 2020
+              }
+            })
+          }
+        })
+      },
+      getProductType () {
+        queryProductionType('product_Type').then(res => {
+          this.houseTypeOptions = res.data
+          try {
+            const product_type = JSON.parse(sessionStorage.getItem('plateAnalysisQuery')).productType
+            this.houseTypeVal = product_type || res.data[0].businessId
+          } catch (e) {
+            this.houseTypeVal = ''
+          }
+        })
       }
     },
     created() {
@@ -255,28 +314,29 @@
         return demoData
       }
     },
-    beforeMount() {
-      for(let i = 2000; i<= 2020; i++) {
+   async beforeMount() {
+      for(let i = new Date().getFullYear(); i>= 2000; i--) {
         this.timeOptions.push({
           value: i,
           label: i + '年'
         })
       }
-      getRegionPlate().then(res => {
-        this.regionOptions = res.data
-        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
-          }
-        })
-      })
+     await this.getRegionAndPlate()
+     await this.getProductType()
+     this.getPlateAnalysisData()
+    },
+    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]
+        }
+      }))
     }
-
   }
 </script>
 
@@ -290,7 +350,7 @@
   }
   .supplyDealCharts{
     width: 90%;
-    margin: 40px auto 0;
+    margin: 0 auto;
     display: flex;
     flex-direction: row;
     table.table{

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
+           }
          })
       }
     },