feat: 板块供求数据分析页面图表真实数据渲染成功

      楼盘详情 导出为图片

.env

@@ -2,5 +2,5 @@ NODE_ENV = "development"
 BASE_URL = "./"
 
 VUE_APP_PUBLIC_PATH = "./"
-VUE_APP_API = "http://127.0.0.1:9393/api/v1/"
-VUE_APP_OSS_SRC = "https://ss1.bdstatic.com"
\ No newline at end of file
+VUE_APP_API = "http://10.96.7.13:9393/api/v1/"
+VUE_APP_OSS_SRC = "https://ss1.bdstatic.com"

package.json

@@ -15,6 +15,7 @@
     "core-js": "^3.4.3",
     "echarts": "^4.8.0",
     "element-ui": "^2.13.1",
+    "html2canvas": "^1.0.0-rc.5",
     "path-to-regexp": "^6.1.0",
     "svg-sprite-loader": "^4.2.7",
     "v-charts": "^1.19.0",

src/assets/js/api/plateSupplyManage.js

+import xhr from '@utils/http'
+
+
+
+export function getSupplyNumData(property, region, year) {
+  return xhr.get('/bnssale/bns-sale/selectRegion', {
+    property,
+    region,
+    year
+  })
+}

src/plugins/router/index.js

@@ -5,7 +5,7 @@ import { getToken } from '@assets/js/auth'
 const whiteList = ['/login', '/test']
 
 router.beforeEach((to, from, next) => {
-  if (!getToken()) {
+  if (getToken()) {
     // 拥有访问权限
     if (to.path === '/login') {
       // 访问登录页时，重定向至首页（已具备访问权限）

src/views/plateSupplyData/index.vue

@@ -42,18 +42,6 @@
               <td v-for="(item,index) in value.data" :key="index">{{item}}</td>
             </tr>
           </table>
-<!--          <el-table-->
-<!--            border-->
-<!--            style="width: 100%">-->
-<!--            <el-table-column-->
-<!--              prop="type"-->
-<!--              label="面积区间">-->
-<!--            </el-table-column>-->
-<!--            <el-table-column-->
-<!--              prop="80-90"-->
-<!--              label="80-90">-->
-<!--            </el-table-column>-->
-<!--          </el-table>-->
         </div>
         <div style="width: 50%">
           <ve-histogram :data="chartData2" :legend="{ bottom: 20 }" :colors="colorArr" :settings="chartSettings2"></ve-histogram>
@@ -70,6 +58,7 @@
 </template>
 
 <script>
+  import { getSupplyNumData  } from "../../assets/js/api/plateSupplyManage";
   import { colors } from "../../components/color";
   export default {
     name: "ProductAnalysis",
@@ -78,12 +67,7 @@
         chartData: {
           columns: ['areaRange', 'supplyProportion', 'dealProportion'],
           rows: [
-            { 'areaRange': '80-90', 'supplyProportion': 0.08, 'dealProportion': 1.5, },
-            { 'areaRange': '90-100', 'supplyProportion': 0.04, 'dealProportion': 0.05 },
-            { 'areaRange': '100-110', 'supplyProportion': 0.04, 'dealProportion': 0.05 },
-            { 'areaRange': '110-120', 'supplyProportion': 0.07, 'dealProportion': 0.05 },
-            { 'areaRange': '120-130', 'supplyProportion': 0.09, 'dealProportion': 0.05 },
-            { 'areaRange': '130-140', 'supplyProportion': 0.03, 'dealProportion': 0.05 }
+
           ]
         },
         chartSettings : {
@@ -96,20 +80,15 @@
           }
         },
         chartData2: {
-          columns: ['areaRange', 'Rate'],
+          columns: ['areaRange', 'rate'],
           rows: [
-            { 'areaRange': '80-90', 'Rate': 1 },
-            { 'areaRange': '90-100', 'Rate': 2 },
-            { 'areaRange': '100-110', 'Rate': 0.1 },
-            { 'areaRange': '110-120', 'Rate': 0.5 },
-            { 'areaRange': '120-130', 'Rate': 0.7 },
-            { 'areaRange': '130-140', 'Rate': 1.5 }
+
           ]
         },
         chartSettings2: {
           labelMap: {
             areaRange: '面积区间',
-            Rate: '供求比'
+            rate: '供求比'
           }
         },
         regionVal: '', // 行政区选择
@@ -121,29 +100,50 @@
         supplyData: {
           areaRange: {
             name: '面积区间',
-            data: ['80-90', '90-100', '100-110', '110-120', '120-130', '130-140']
+            data: []
           },
           supplyNum: {
             name: '供应数量',
-            data: [10000, 20000, 30000, 40000, 50000, 60000]
+            data: []
           },
           dealNum: {
             name: '成交数量',
-            data: [8000, 16000, 24000, 32000, 40000, 48000]
+            data: []
           }
         }, // 表格供求数量的数据
         supplyRateData:{
           areaRange: {
             name: '面积区间',
-            data: ['80-90', '90-100', '100-110', '110-120', '120-130', '130-140']
+            data: []
           },
           Rate: {
             name: '供求比',
-            data: [0.8, 0.8 ,0.8, 0.8, 0.8, 0.8]
+            data: []
           },
         }, // 表格供求比的数据
         colorArr: colors
       }
+    },
+    mounted() {
+      getSupplyNumData('','','2020').then(res => {
+       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
+      })
     }
   }
 </script>

src/views/propertiesDetail/index.vue

@@ -59,7 +59,10 @@
 <!--销售信息-->
     <div class="salesInfomation">
       <div class="title" style="padding-left: 20px">销售信息</div>
-      <div class="container">
+      <div style="text-align: right;padding-right: 20px">
+        <el-button type="primary" @click="imgExport">导出图表为图片</el-button>
+      </div>
+      <div ref="imgExport" class="container">
         <el-row class="firstRow">
           <el-col :span="12">
 <!--            供应成交套数比 图表展示-->
@@ -142,6 +145,7 @@
   import { columData } from "./tableColum";
   import banner from '@comp/bannerDetail'
   import { colors } from "../../components/color";
+  import html2canvas from "html2canvas"
   export default {
     name: "propertiesDetail",
     components: {banner},
@@ -270,7 +274,31 @@
       }
     },
     methods: {
-
+      imgExport () {
+        html2canvas(this.$refs.imgExport).then(canvas => {
+          let dataURL = canvas.toDataURL("image/png");
+          const bolb = this.dataURLtoBlob(dataURL)
+          const url = window.URL.createObjectURL(bolb)
+          const link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.setAttribute('download', `销售信息`) // 自定义下载文件名（如exemple.txt）
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+        });
+      },
+      dataURLtoBlob(dataurl) {
+        var arr = dataurl.split(',');
+        var bstr = atob(arr[1]);
+        var n = bstr.length;
+        var mime = arr[0].match(/:(.*?);/)[1]
+        var u8arr = new Uint8Array(n)
+        while(n--){
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], {type: mime });
+      }
     },
     computed: {
       colum () {