Merge remote-tracking branch 'origin/master'

# Conflicts:
#	package.json
#	src/main.js
#	src/views/plateSupplyData/index.vue

.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.150:8080/api/v1/"
+VUE_APP_OSS_SRC = "https://ss1.bdstatic.com"

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
   ],
   // add your custom rules here
   rules: {
-    'no-console': 'off'
+    'no-console': 'off',
+    'no-debugger': 'off',
   }
 }

package.json

@@ -13,13 +13,17 @@
   "dependencies": {
     "axios": "^0.19.2",
     "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",
+    "v-viewer": "^1.5.1",
     "vue": "^2.6.10",
     "vue-baidu-map": "^0.21.22",
     "vue-router": "^3.1.3",
+    "vue2-viewer": "^1.0.3",
     "vuex": "^3.3.0"
   },
   "devDependencies": {

src/App.vue

@@ -9,5 +9,6 @@
 <style lang="stylus">
   html, body, #app {
     height 100%
+    overflow hidden
   }
 </style>

src/assets/css/variable.styl

@@ -7,11 +7,11 @@ dark_gray = #889aa4
 bodyBg = #F7F7F7
 
 //sidebar
-menuText = #bfcbd9;
-menuActiveText = #409EFF;
+menuText = #FFFFFF;
+menuActiveText = #FFFFFF;
 subMenuActiveText = #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
-menuBg = #304156;
+menuBg = #2E75B6;
 menuHover = #263445;
 
 subMenuBg = #1f2d3d;

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
+  })
+}
+export function getRegionPlate() {
+  return xhr.get('/bnsregion/bns-region/adminRegionAndRegion')
+}

src/components/Breadcrumb/index.vue

@@ -29,16 +29,13 @@ export default {
   methods: {
     getBreadcrumb() {
       let matched = this.$route.matched.filter(item => item.name)
-
       const first = matched[0]
-      if (first && first.name !== 'dashboard') {
-        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
+      if (first && first.name !== 'home') {
+        matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
       }
-
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
     },
     pathCompile(path) {
-      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
       const { params } = this.$route
       var toPath = compile(path)
       return toPath(params)
@@ -49,7 +46,7 @@ export default {
         this.$router.push(redirect).catch(() => {})
         return
       }
-      this.$router.push(this.pathCompile(path))
+      this.$router.push(this.pathCompile(path)).catch(() => {})
     }
   }
 }
@@ -57,6 +54,7 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .app-breadcrumb.el-breadcrumb {
+    width: 10%;
     display: inline-block;
     font-size: 14px;
     line-height: 50px;

src/components/Layout/Item.vue

@@ -22,7 +22,7 @@ export default {
       // }else {
       //   vnodes.push(<svg-icon icon-class={icon}/>)
       // }
-      vnodes.push(<svg-icon icon-class={icon}/>)
+      vnodes.push(<i class={icon}/>)
     }
 
     if (title) {

src/components/Layout/SidebarItem.vue

@@ -97,10 +97,19 @@ export default {
       width: 100%;
       overflow: hidden;
       text-decoration none
+    .active {
+          background-color: rgb(46, 117, 182)!important
+     }
     }
-
     .svg-icon {
       margin-right: 12px;
     }
+    .submenu-title-noDropdown{
+      padding 8px 0
+      line-height 40px
+      i {
+        color #ffffff
+      }
+    }
   }
-</style>
\ No newline at end of file
+</style>

src/components/Layout/index.vue

@@ -32,6 +32,7 @@
             class="hamburger-container"
           />
           <breadcrumb />
+          <async-search class="main-search"></async-search>
           <el-dropdown class="avatar-container" trigger="click">
             <div class="avatar-wrapper">
               <img v-if="avatar" :src="avatar" class="user-avatar" />
@@ -53,7 +54,6 @@
         <el-main>
           <router-view></router-view>
         </el-main>
-        <el-footer>Copyright © 2020 Breaker-93</el-footer>
       </el-container>
     </el-container>
   </div>
@@ -64,12 +64,14 @@ import menuStyle from "@assets/css/variable.styl";
 import Hamburger from "@comp/Hamburger";
 import Breadcrumb from "@comp/Breadcrumb";
 import SidebarItem from "./SidebarItem";
+import asyncSearch from '@comp/asyncSearch'
 export default {
   name: "Layout",
   components: {
     Hamburger,
     Breadcrumb,
     SidebarItem,
+    asyncSearch
   },
   props: {},
   data() {
@@ -94,6 +96,7 @@ export default {
   },
   computed: {
     routes() {
+      console.log(this.$router.options.routes)
       return this.$router.options.routes;
     },
   },
@@ -115,6 +118,12 @@ export default {
     padding-left 0
     background #fff
     box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    display flex
+    flex-direction row
+    align-items center
+    .main-search{
+      float right
+    }
   }
   .el-aside {
     .system-name {
@@ -151,8 +160,8 @@ export default {
     }
   }
   .el-main {
-    height 1200px
-    background bodyBg
+    height 100%
+    background #ffffff
   }
   .el-footer {
     color #909399

src/components/asyncSearch/index.vue

+<template>
+    <div class="asyncSearch" style="display: inline-flex;flex-direction: row;align-items: center">
+      <el-autocomplete
+        prefix-icon="el-icon-search"
+        v-model="search"
+        value-key="text"
+        :trigger-on-focus="false"
+        :fetch-suggestions="querySearchAsync"
+        placeholder="请输入内容"
+        @select="handleSelect">
+        <template slot-scope="{ item }">
+          <div style="float: left">{{ item.text }}</div>
+          <span style="float: right;font-size: 13px;color: #8492a6">{{ item.type }}</span>
+        </template>
+      </el-autocomplete>
+      <el-button type="primary"  @click="searchEmit">搜索</el-button>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "search",
+    data () {
+      return {
+        search: '',
+        selectData : ''
+      }
+    },
+    methods: {
+      querySearchAsync(queryString, cb) {
+        const result = [  { lng: 117.200, lat: 39.133, text: '好楼盘', type: '楼盘' },
+                          { lng: 117.200, lat: 39.133, text: '好楼盘2', type: '板块'} ]
+        cb(result)
+      },
+      handleSelect(item) {
+        this.selectData = item
+      },
+      searchEmit () {
+        if(this.selectData) {
+          window.eventBus.$emit('searchParamChange', this.selectData)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="stylus">
+.asyncSearch{
+  min-width 400px
+  .el-autocomplete{
+    width 100%
+  }
+  .el-button{
+    margin-left 10px
+  }
+}
+</style>

src/components/bannerDetail/index.vue

+<template>
+  <div class="bannerMap">
+    <el-carousel :interval="5000" arrow="always" indicator-position="outside">
+      <el-carousel-item class="carouselCenter" v-for="(item, index) in bannerData" :key="index">
+        <viewer :images="[]" :style="{ width: imgWidth + '%', height: '100%', margin: '0 auto' }">
+          <img :src="item" :style="{ width: '100%', height: '100%' }">
+        </viewer>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "banner",
+    props: {
+      bannerData: {
+        type: [Array,Number],
+        default () {
+          return []
+        }
+      },
+      imgWidth: {
+        type: [Number, String],
+        default() {
+          return 100;
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="stylus">
+  .bannerMap{
+  .el-carousel__container{
+    min-height 400px
+    text-align center
+  }
+  }
+</style>
+<style>
+  .viewer-play{
+    display: none;
+  }
+  .viewer-prev {
+    display: none;
+  }
+  .viewer-next {
+    display: none;
+  }
+</style>

src/components/color.js

+export const colors = ['#3F6D98', '#ADC6E5',  '#5B9BD5', '#C7D7EC', '#4A7FB0', '#8BB1DD', '#538EC3']

src/components/mapOverlay/index.vue

+<template>
+  <bm-overlay
+    ref="customOverlay"
+    pane="labelPane"
+    :class="{'flex': true, 'circle': circle && width === height}"
+    :style="backGroundType === 'image' ? {} : { width: width + 'px', height: height + 'px', color: textColor, backgroundColor: bgColor}"
+    @draw="draw">
+    <div
+      :style="{fontSize: fontSize, fontFamily: 'Arial', textAlign: 'center', fontWeight: 'normal'}"
+      v-if="backGroundType === 'color'">
+      {{text}}
+      <div v-if="num" style="font-weight: 600;height: 20px;line-height: 40px">{{num}}</div>
+    </div>
+    <div v-if="backGroundType === 'waterDrop'" class="flex-colum">
+      <div style="transform: rotate(-45deg)">
+        {{text}}
+      </div>
+    </div>
+  </bm-overlay>
+</template>
+<script>
+  export default {
+    name: 'overlay',
+    props: ['text', 'position', 'backGroundType', 'textColor', 'bgColor', 'circle', 'width', 'height', 'num', 'fontSize'],
+    watch: {
+      position: {
+        handler () {
+          this.$refs.customOverlay.reload()
+        },
+        deep: true
+      }
+    },
+    methods: {
+      draw ({el, BMap, map}) {
+        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'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .circle{
+    border-radius: 50%;
+  }
+  .flex{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    opacity: 0.6;
+  }
+  .flex:hover{
+    opacity: 1;
+  }
+  .centerImage{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .flex-colum{
+    width: 70px;
+    height: 70px;
+    line-height: 70px;
+    text-align: center;
+    background-color: rgb(203,173,91);
+    border-radius: 70px 70px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+    color: #ffffff;
+    writing-mode: vertical-lr;
+  }
+</style>

src/components/propertyControll/index.vue

+<template>
+  <div class="container">
+    <div class="row">
+      <div class="left blue">
+        <div class="blockShow"></div>
+      </div>
+      <div class="right buleText">
+        <div :style="{ display: 'inline', cursor: 'pointer' , color: saleingState ? 'rgb(25,124,230)' : '#000' }" @click="saleingState = !saleingState">在售楼盘</div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="left green">
+        <div class="blockShow"></div>
+      </div>
+      <div class="right greenText">
+        <div :style="{ display: 'inline', cursor: 'pointer' , color: soldOutState ? 'rgb(169,209,142)' : '#000' }" @click="soldOutState = !soldOutState">售罄楼盘</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "propertyControll",
+    data () {
+      return {
+        soldOutState: true,
+        saleingState: true
+      }
+    },
+    watch: {
+      saleingState (val) {
+        let state
+        if(val && this.soldOutState) {
+          state = 'all'
+        } else if (val && !this.soldOutState) {
+          state = 0
+        } else if (!val && this.soldOutState) {
+          state = 1
+        } else {
+          state = ''
+        }
+        this.$emit('stateChange', state)
+      },
+      soldOutState (val) {
+        let state
+        if(val && this.saleingState) {
+          state = 'all'
+        } else if (val && !this.saleingState) {
+          state = 1
+        } else if (!val && this.saleingState) {
+          state = 0
+        } else {
+          state = ''
+        }
+        this.$emit('stateChange', state)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .container {
+    background-color: #fff;
+    width: 146px;
+    border: 1px solid #000000;
+  }
+  .row {
+    width: 100%;
+    padding: 10px 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .left {
+    width: 40%;
+  }
+  .right {
+    width: 60%;
+    font-weight: 500;
+  }
+  .green .blockShow {
+    width: 20px;
+    height: 20px;
+    background-color: rgb(169,209,142);
+    margin: 0 auto;
+  }
+  .blue .blockShow {
+    width: 20px;
+    height: 20px;
+    background-color: rgb(25,124,230);
+    margin: 0 auto;
+  }
+  .left {
+    text-align: center;
+  }
+  .right {
+    text-align: left;
+  }
+</style>

src/components/unitCard/index.vue

+<template>
+  <div class="unitCard">
+    <div class="imgContainer">
+      <viewer :images="[]">
+        <img  src="@assets/img/zlhx.png"  width="100%" height="100%">
+      </viewer>
+    </div>
+  <div class="unitDetail">
+      <el-col :span="8">
+        xxxx家园
+      </el-col>
+      <el-col :span="8">
+        xxxxx平方米
+      </el-col>
+      <el-col :span="8">
+        x室x厅x卫
+      </el-col>
+  </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'unitCard',
+    props: {
+
+    },
+    data () {
+      return {
+
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+.unitCard{
+  margin 0 auto
+  position relative
+  border: 1px solid #222222;
+  box-sizing border-box
+  width: 310px;
+  height: 235px;
+  .imgContainer {
+    margin auto
+    width 50%
+    height 100%
+    .imgPreview {
+      display block
+      width 100%
+      height 100%
+    }
+  }
+  .unitDetail{
+   display flex
+   flex-direction row
+   align-items center
+   width 100%
+   height 40px
+   position absolute
+   bottom 0
+   background-color: rgba(30, 39, 46,0.5);
+   .el-col{
+     text-align center
+     color #ffffff
+     font-size 16px
+     font-family "Arial Black"
+   }
+  }
+}
+</style>
+<style>
+.viewer-play{
+  display: none;
+}
+.viewer-prev {
+  display: none;
+}
+.viewer-next {
+  display: none;
+}
+</style>

src/main.js

@@ -9,16 +9,24 @@ import '@assets/css/normailze.css';
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
-import baiduMap from 'vue-baidu-map'
+import BaiduMap from 'vue-baidu-map'
 import Vcharts from 'v-charts'
-
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 import '@assets/icons'
 
 Vue.use(ElementUI, { locale })
-Vue.use(baiduMap, { ak: 'zzr05y1bPhSwRpzUzONk2aRKrX8AZl84' })
+Vue.use(BaiduMap, { ak: 'zzr05y1bPhSwRpzUzONk2aRKrX8AZl84' })
 Vue.use(Vcharts)
+Vue.use(Viewer, {
+  defaultOptions: {
+    zIndex: 9999,
+    toolbar: true,
+    fullscreen: false
+  } })
 Vue.prototype.$axios = xhr
 Vue.config.productionTip = false;
+window.eventBus = new Vue()
 
 new Vue({
   router,

src/router/example.js

-
-import demo1 from "../views/example/Demo1";
 var demoRoutes = [
-  {
-    path: "/demo1",
-    name: "demo1",
-    component: demo1,
-    hidden: true
-  }
+
 ];
 
 export default demoRoutes;

src/router/index.js

@@ -6,7 +6,6 @@ import demoRoutes from "./example";
 import Login from "../views/Login.vue"
 import NotFound from "../views/404"
 import Layout from '@comp/Layout'
-import dashboard from '@/views/dashboard/index'
 
 Vue.use(VueRouter);
 
@@ -14,57 +13,69 @@ let routes = [
   {
     path: '/',
     component: Layout,
-    redirect: '/dashboard',
-    name: 'dashboard',
+    redirect: '/regionalPlate',
+    name: 'home',
     meta: { title: '首页' },
     hidden: true,
-    children: [{
-      path: 'dashboard',
-      component: dashboard
-    }]
+    children: []
   },
   {
-    path: '/systemConfig',
+    path: '/regionalPlate',
+    hidden: false,
+    meta: { title: '户型查询', icon: 'el-icon-discover' },
     component: Layout,
-    redirect: '/systemConfig/access',
-    name: 'System',
-    meta: { title: '系统配置', icon: 'system-set' },
     children: [
       {
-        path: 'access',
-        component: () => import('@/views/system/access'),
-        name: 'access',
-        meta: { title: '权限管理' }
-      },
-      {
-        path: 'role',
-        component: () => import('@/views/system/role'),
-        name: 'role',
-        meta: { title: '角色管理' }
-      },
+        path: '/regionalPlate',
+        name: 'regionalPlate',
+        hidden: false,
+        meta: { title: '户型查询' },
+        component: () => import('@/views/RegionalPlate/index.vue'),
+      }
+    ]
+  },
+  {
+    path: '/plateSupplyData',
+    hidden: false,
+    meta: { title: '板块供求数据', icon: 'el-icon-search' },
+    component: Layout,
+    children: [
       {
-        path: 'group',
-        component: () => import('@/views/system/group'),
-        name: 'group',
-        meta: { title: '组管理' }
-      },
+        path: '/plateSupplyData',
+        name: 'plateSupplyData',
+        meta: { title: '板块供求数据' },
+        hidden: false,
+        component: () => import('@/views/plateSupplyData/index.vue'),
+      }
+    ]
+  },
+  {
+    path: '/ProductAnalysis',
+    hidden: false,
+    meta: { title: '板块产品分析', icon: 'el-icon-pie-chart' },
+    component: Layout,
+    children: [
       {
-        path: 'user',
-        component: () => import('@/views/system/user'),
-        name: 'user',
-        meta: { title: '用户管理' }
+        path: '/ProductAnalysis',
+        name: 'ProductAnalysis',
+        hidden: false,
+        meta: { title: '板块产品分析' },
+        component: () => import('@/views/ProductAnalysis/index.vue'),
       }
     ]
   },
   {
-    path: '/form',
+    path: '/detail',
+    hidden: true,
+    meta: { title: '楼盘详情' },
     component: Layout,
     children: [
       {
-        path: 'index',
-        name: 'Form',
-        component: () => import('@/views/form/index'),
-        meta: { title: 'Form', icon: 'form' }
+        path: '/propertiesDetail',
+        name: 'propertiesDetail',
+        hidden: false,
+        meta: { title: '楼盘详情' },
+        component: () => import('@/views/propertiesDetail/index.vue'),
       }
     ]
   },

src/views/ProductAnalysis/index.vue

+<template>
+<!--  板块产品分析-->
+ <section class="ProductAnalysis">
+   <div class="header">
+     <el-col :span="4">
+       <el-select v-model="regionVal" placeholder="行政区">
+         <el-option
+           v-for="item in regionOptions"
+           :key="item.value"
+           :label="item.label"
+           :value="item.value">
+         </el-option>
+       </el-select>
+     </el-col>
+     <el-col :span="4">
+       <el-select v-model="plateVal" placeholder="板块名">
+         <el-option
+           v-for="item in plateOptions"
+           :key="item.value"
+           :label="item.label"
+           :value="item.value">
+         </el-option>
+       </el-select>
+     </el-col>
+     <el-col :span="4">
+       <el-select v-model="timeVal" placeholder="年份">
+         <el-option
+           v-for="item in timeOptions"
+           :key="item.value"
+           :label="item.label"
+           :value="item.value">
+         </el-option>
+       </el-select>
+     </el-col>
+     <el-col :span="4">
+       <el-select v-model="houseTypeVal" placeholder="类型">
+         <el-option
+           v-for="item in houseTypeOptions"
+           :key="item.value"
+           :label="item.label"
+           :value="item.value">
+         </el-option>
+       </el-select>
+     </el-col>
+     <el-col :span="4">
+       <el-select v-model="areaInterval" placeholder="面积区间">
+         <el-option
+           v-for="item in areaIntervalData"
+           :key="item.value"
+           :label="item.label"
+           :value="item.value">
+         </el-option>
+       </el-select>
+     </el-col>
+     <el-col :span="4" style="text-align: right">
+       <el-radio-group v-model="showMode">
+         <el-radio-button :label="0">显示数据</el-radio-button>
+         <el-radio-button :label="1">显示户型</el-radio-button>
+       </el-radio-group>
+     </el-col>
+   </div>
+   <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.production}}</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" :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.nxmk}}</td>
+           <td>{{item.qjsmk || 0}}</td>
+           <td>{{item.zwmk || 0}}</td>
+           <td>{{item.kwmk || 0}}</td>
+         </tr>
+       </table>
+     </div>
+   </div>
+   <div v-else class="supplyDealUnitType">
+    <div class="mainUnit blueBorder">
+      <h2 class="header">主力户型</h2>
+      <div class="unitContainer">
+        <el-col :span="8" v-for="i in 3" :key="i" >
+          <unit-card ></unit-card>
+        </el-col>
+      </div>
+      <el-pagination
+        :page-size="3"
+        layout="total, prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </div>
+    <div class="nonMainUnit blueBorder">
+      <h2 class="header">非主力户型</h2>
+      <div class="unitContainer">
+        <el-col :span="8" v-for="i in 3" :key="i" >
+          <unit-card ></unit-card>
+        </el-col>
+      </div>
+      <el-pagination
+        :page-size="3"
+        layout="total, prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </div>
+   </div>
+ </section>
+</template>
+
+<script>
+  import { colors } from "../../components/color";
+  import unitCard from '@comp/unitCard'
+  export default {
+    name: "ProductAnalysis",
+    components:{
+      unitCard
+    },
+    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 }
+          ]
+        },
+        pieSettings: {
+          labelMap: {
+            production: '产品类型',
+            supplication: '产品提供数'
+          }
+        },
+        histogramData: {
+          columns: ['rommInfo', 'proNumOne', 'proNumTwo', 'proNumThree'],
+          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 }
+          ]
+        },
+        map: {
+          'nxmk': '南向面宽',
+          'qjsmk': '起居室面宽',
+          '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
+          }
+          ],
+        chartSettings : {
+          axisSite: { right: ['下单率'] },
+          yAxisType: ['normal'],
+          labelMap: {
+            roomInfo: '面宽类型',
+            proNumOne: '产品1',
+            proNumTwo: '产品2',
+            proNumThree: '产品3'
+          }
+        },
+        regionOptions: [],
+        regionVal: '',
+        plateOptions: [],
+        plateVal: '',
+        timeOptions: [],
+        timeVal: '',
+        houseTypeOptions: [],
+        houseTypeVal: '',
+        areaInterval: '',
+        areaIntervalData: [],
+        showMode: 0,
+        colorsArr: colors
+      }
+    },
+    created() {
+      window.eventBus.$on('searchParamChange', (houseData) => {
+        this.$router.push({
+          path: '/regionalPlate',
+          query: houseData
+        })
+      })
+    }
+  }
+</script>
+
+<style lang="stylus">
+.ProductAnalysis{
+  width: 100%;
+  height: 100%;
+  .header {
+    height 40px
+    width: 100%;
+  }
+  .supplyDealCharts{
+    width: 90%;
+    margin: 40px auto 0;
+    display: flex;
+    flex-direction: row;
+    table.table{
+      font-family: verdana,arial,sans-serif;
+      font-size:11px;
+      color:#333333;
+      border-width: 1px;
+      border-color: #d1ccc0;
+      border-collapse: collapse;
+      margin 0 auto
+    }
+    table.table th {
+      border-width: 1px;
+      padding: 12px;
+      border-style: solid;
+      border-color: #d1ccc0;
+      background-color: #dedede;
+      text-align center
+    }
+    table.table td {
+      border-width: 1px;
+      padding: 12px;
+      border-style: solid;
+      border-color: #d1ccc0;
+      background-color: #ffffff;
+      text-align center
+    }
+  }
+  .supplyDealUnitType{
+    width: 90%;
+    margin: 40px auto 0;
+    display flex
+    flex-direction column
+  }
+  .supplyDealUnitType .blueBorder {
+    border 1px solid #00a8ff
+    min-height 200px
+  }
+  .mainUnit{
+    padding-bottom 20px
+   .header {
+     padding 0 15px
+   }
+   .unitContainer {
+     width 100%
+     overflow hidden
+   }
+   .el-pagination{
+     margin-top 10px
+     text-align center
+   }
+  }
+  .nonMainUnit{
+    margin-top 15px
+    padding-bottom 20px
+    .header {
+      padding 0 15px
+    }
+    .unitContainer {
+      width 100%
+      overflow hidden
+    }
+    .el-pagination{
+      margin-top 10px
+      text-align center
+      font-size 15px
+    }
+  }
+}
+</style>

src/views/RegionalPlate/demoData.js

+export const regionData = [
+  {
+    lng: 117.200,
+    lat: 39.133,
+    text: '西青区',
+    number: 0
+  },
+  {
+    lng: 117.100,
+    lat: 39.233,
+    text: '行政区2',
+    number: 5,
+    children: [
+      {
+        lng: 117.107,
+        lat: 39.228,
+        text: '第一板块',
+        number: 2,
+        radius: 1500,
+        children: [
+          {
+            lng: 117.106,
+            lat: 39.2281,
+            text: '楼盘1',
+            state: 0
+          },
+          {
+            lng: 117.1074,
+            lat: 39.2286,
+            text: '楼盘2',
+            state: 1
+          }
+        ]
+      },
+      {
+        lng: 117.104,
+        lat: 39.217,
+        text: '第二板块',
+        number: 2,
+        radius: 1500,
+        children: [
+          {
+            lng: 117.1048,
+            lat: 39.2168,
+            text: '楼盘1',
+            state: 1
+          },
+          {
+            lng: 117.105,
+            lat: 39.2167,
+            text: '楼盘2',
+            state: 1
+          }
+        ]
+      }
+    ]
+  },
+  {
+    lng: 117.250,
+    lat: 39.183,
+    text: '西青区',
+    number: 0
+  },
+  {
+    lng: 117.300,
+    lat: 39.333,
+    text: '行政区3',
+    number: 5
+  }
+]

src/views/dashboard/index.vue

-<template>
-  <div class="dashboard-container">
-    <div class="dashboard-text">name:{{ name }}</div>
-    <div class="dashboard-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  name: 'dashboard',
-  computed: {
-    ...mapGetters([
-      'name',
-      'roles',
-      'authorities'
-    ])
-  },
-  created() {
-    console.log('用户权限：', this.authorities)
-  }
-}
-</script>
-
-<style lang="stylus" scoped>
-.dashboard {
-  &-container {
-    margin: 30px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>

src/views/example/Demo1.vue

-<template>
-  <section class="demo1">
-    src/views/example/Demo1.vue 文件的代码格式作为【标准的vue文件模板】
-  </section>
-</template>
-<script>
-export default {
-  name: "demo1",
-  components: {},
-  props: {},
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-  computed: {},
-  watch: {},
-};
-</script>
-<style lang="stylus">
-.demo1 {
-  text-align center
-}
-</style>

src/views/form/index.vue

-<template>
-  <div class="app-container">
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name"/>
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai"/>
-          <el-option label="Zone two" value="beijing"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;"/>
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;"/>
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery"/>
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type"/>
-          <el-checkbox label="Promotion activities" name="type"/>
-          <el-checkbox label="Offline activities" name="type"/>
-          <el-checkbox label="Simple brand exposure" name="type"/>
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor"/>
-          <el-radio label="Venue"/>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea"/>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
-      }
-    }
-  },
-  methods: {
-    onSubmit() {
-      this.$message('submit!')
-    },
-    onCancel() {
-      this.$message({
-        message: 'cancel!',
-        type: 'warning'
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.line{
-  text-align: center;
-}
-</style>
-

src/views/propertiesDetail/staticData.js

+// 板块区域
+export const plateRegionDetail = [
+  {
+    title: '区域定位',
+    flex: 24,
+    prop: 'regionLcation'
+  },
+  {
+    title: '产品类型',
+    flex: 24,
+    prop: 'productionType'
+  },
+  {
+    title: '区域优势',
+    flex: 24,
+    prop: 'regionAdvantages'
+  },
+  {
+    title: '已有楼盘',
+    flex: 24,
+    prop: 'existingProperty'
+  },
+  {
+    title: '置业均价',
+    flex: 12,
+    prop: 'averageEstate'
+  },
+  {
+    title: '楼面均价',
+    flex: 12,
+    prop: 'averageFool'
+  },
+  {
+    title: '区域发展',
+    flex: 24,
+    prop: 'development'
+  }
+]

src/views/propertiesDetail/tableColum.js

+export const columData = [
+  {
+    prop: 'region',
+    label: '行政分区'
+  },
+  {
+    prop: 'area',
+    label: '区域'
+  },
+  {
+    prop: 'landArea',
+    label: '土地面积'
+  },
+  {
+    prop: 'lotRatio',
+    label: '容积率'
+  },{
+    prop: 'builtArea',
+    label: '建筑面积'
+  },{
+    prop: 'buildingDensity',
+    label: '建筑密度'
+  },{
+    prop: 'floorPrice',
+    label: '楼面价元/m2'
+  },{
+    prop: 'closingDate',
+    label: '成交日期'
+  },{
+    prop: 'totalPrice',
+    label: '成交总价(亿)'
+  },{
+    prop: 'premium',
+    label: '溢价'
+  },{
+    prop: 'transferee',
+    label: '受让方'
+  }
+]