合并本地

VUECODE/smart-property-manage/config/dev.env.js

 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://localhost:8085/operate-api"',
+  BASE_API: '"http://localhost:8085/property-api"',
 })

VUECODE/smart-property-manage/src/components/chart/chart1.vue

 <template>
-  <div id="node1">
-  </div>
+  <div id="node1"/>
 </template>
 
 <script>
 import $ from 'jquery'
 
 export default {
-  mounted () {
+  mounted() {
     this.rander()
   },
   methods: {
-    rander () {
+    rander() {
       var data = [{
         type: '未解决',
         percent: 0.3
       }, {
         type: '已解决',
         percent: 0.7
-      },]
+      }]
       var sum = 200
       var ds = new DataSet()
       var dv = ds.createView().source(data)
       dv.transform({
         type: 'map',
-        callback: function callback (row) {
+        callback: function callback(row) {
           row.value = parseInt(sum * row.percent)
           return row
         }
         },
         rotate: 0,
         autoRotate: false,
-        formatter: function formatter (text, item) {
+        formatter: function formatter(text, item) {
           return String(parseInt(item.point.percent * 100)) + '%'
         }
       })
         position: ['50%', '-10%'],
         html: '<div class="g2-guide-title"><p class="title">昨日工单解决情况200单</p></div>'
       })
-      chart.on('interval:mouseenter', function (ev) {
+      chart.on('interval:mouseenter', function(ev) {
         var data = ev.data._origin
-        $(".g2-guide-html").css('opacity', 1)
-        $(".g2-guide-html .title").text(data.type)
-        $(".g2-guide-html .value").text(data.value)
+        $('.g2-guide-html').css('opacity', 1)
+        $('.g2-guide-html .title').text(data.type)
+        $('.g2-guide-html .value').text(data.value)
       })
 
-      chart.on('interval:mouseleave', function () {
-        $(".g2-guide-html .title").text('总计')
-        $(".g2-guide-html .value").text(200)
+      chart.on('interval:mouseleave', function() {
+        $('.g2-guide-html .title').text('总计')
+        $('.g2-guide-html .value').text(200)
       })
       chart.render()
     }
     }
   }
 }
-</style>
+</style>

VUECODE/smart-property-manage/src/components/chart/chart2.vue

 <template>
-  <div id="node2"></div>
+  <div id="node2"/>
 </template>
 
 <script>
 import G2 from '@antv/g2'
-import DataSet from '@antv/data-set'
 
 export default {
-  mounted () {
+  mounted() {
     this.rander()
   },
   methods: {
-    rander () {
+    rander() {
       var data = [{
         item: '报修单一',
         count: 40,
       })
       chart.source(data, {
         percent: {
-          formatter: function formatter (val) {
+          formatter: function formatter(val) {
             val = val * 100 + '%'
             return val
           }
         showTitle: false,
         itemTpl: '<li><span style="background-color:{color}" class="g2-tooltip-marker"></span>{name}: {value}</li>'
       })
-      chart.intervalStack().position('percent').color('item', function (val) {
+      chart.intervalStack().position('percent').color('item', function(val) {
         if (val === '报修单一') {
           return '#53F9FF'
         } else if (val === '报修单二') {
           return '#454D54'
         }
       }).label('percent', {
-        formatter: function formatter (val, item) {
+        formatter: function formatter(val, item) {
           return item._origin.item + ': ' + val
         },
         textStyle: {
           fill: '#a4b6c5', // 文本的颜色
-          fontSize: '12', // 文本大小
+          fontSize: '12' // 文本大小
         }
-      }).tooltip('item*percent', function (item, percent) {
+      }).tooltip('item*percent', function(item, percent) {
         percent = percent * 100 + '%'
         return {
           name: item,
     color: #a4b6c5;
   }
 }
-</style>
+</style>

VUECODE/smart-property-manage/src/components/chart/chart5.vue

 <template>
-  <div id="node5"></div>
+  <div id="node5"/>
 </template>
 
 <script>
 import G2 from '@antv/g2'
-import DataSet from '@antv/data-set'
 import { mapState, mapActions } from 'vuex'
 
 export default {
     ...mapActions('trunkIndex', [
       'GetSignUser'
     ]),
-    rander () {
+    rander() {
       console.log(this.signUser)
       var data = this.signUser
       var chart = new G2.Chart({
         forceFit: true,
         height: 282,
         padding: [80, 20, 30, 40]
-      });
-      chart.source(data);
+      })
+      chart.source(data)
       console.log(chart)
       chart.axis('count', {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5', // 设置线的颜色
+          stroke: '#a4b6c5' // 设置线的颜色
         },
         grid: null,
         label: {
             textBaseline: 'middle' // 文本基准线，可取 top middle bottom，默认为middle
           }
         }
-      });
+      })
       chart.axis('message', {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5', // 设置线的颜色
+          stroke: '#a4b6c5' // 设置线的颜色
         },
         grid: null,
         label: {
           textStyle: {
             fill: '#a4b6c5', // 文本的颜色
-            fontSize: '12', // 文本大小
+            fontSize: '12' // 文本大小
           }
         }
-      });
+      })
       chart.scale('', {
         tickInterval: 200
-      });
+      })
       chart.guide().html({
         position: ['5%', '-25%'],
         html: '<div class="chart5-title"><p class="title">注册用户统计</p></div>'
         html: `<div class="chart-right-btn"><span>18/11/27</span>&nbsp;<i class='el-icon-date'></i></div>`
       })
 
-      chart.interval().position('message*count').color('message', function (val) {
+      chart.interval().position('message*count').color('message', function(val) {
         if (val === '业主总数' || val === '家属总数') {
-          return '#53F9FF';
+          return '#53F9FF'
         }
-        return '#FF5367';
-      });
-      chart.render();
+        return '#FF5367'
+      })
+      chart.render()
     }
   }
 }
     color: #a4b6c5;
   }
 }
-</style>
+</style>

VUECODE/smart-property-manage/src/components/chart/chart6.vue

 <template>
-  <div id="node6"></div>
+  <div id="node6"/>
 </template>
 
 <script>
 import G2 from '@antv/g2'
 import DataSet from '@antv/data-set'
 export default {
-  mounted () {
+  mounted() {
     this.rander()
   },
   methods: {
-    rander () {
+    rander() {
       var data = [{
-        "year": "11.17",
-        "ACME": 300,
+        'year': '11.17',
+        'ACME': 300
       }, {
-        "year": "11.18",
-        "ACME": 280,
+        'year': '11.18',
+        'ACME': 280
       }, {
-        "year": "11.19",
-        "ACME": 320,
+        'year': '11.19',
+        'ACME': 320
       }, {
-        "year": "11.20",
-        "ACME": 250,
+        'year': '11.20',
+        'ACME': 250
       }, {
-        "year": "11.21",
-        "ACME": 310,
+        'year': '11.21',
+        'ACME': 310
       }, {
-        "year": "11.22",
-        "ACME": 323,
+        'year': '11.22',
+        'ACME': 323
       }, {
-        "year": "11.23",
-        "ACME": 350,
-      }];
-      var dv = new DataSet.View().source(data);
+        'year': '11.23',
+        'ACME': 350
+      }]
+      var dv = new DataSet.View().source(data)
       dv.transform({
         type: 'fold',
         fields: ['ACME'],
         key: 'type',
         value: 'value'
-      });
+      })
       var chart = new G2.Chart({
         container: 'node6',
         forceFit: true,
         height: 282,
         padding: [80, 20, 30, 40]
-      });
+      })
       chart.source(dv, {
         value: {
           alias: 'The Share Price in Dollars',
-          formatter: function formatter (val) {
-            return val;
+          formatter: function formatter(val) {
+            return val
           }
         },
         year: {
           range: [0, 1]
         }
-      });
+      })
       chart.axis('value', {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5', // 设置线的颜色
+          stroke: '#a4b6c5' // 设置线的颜色
         },
         grid: null,
         label: {
             textBaseline: 'middle' // 文本基准线，可取 top middle bottom，默认为middle
           }
         }
-      });
+      })
       chart.axis('year', {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5', // 设置线的颜色
+          stroke: '#a4b6c5' // 设置线的颜色
         },
         grid: null,
         label: {
           textStyle: {
             fill: '#a4b6c5', // 文本的颜色
-            fontSize: '12', // 文本大小
+            fontSize: '12' // 文本大小
           }
         }
-      });
+      })
       chart.tooltip({
         crosshairs: true
-      });
+      })
       chart.guide().html({
         position: ['90%', '-15%'],
         html: `<div class="chart-right-btn"><span>日活跃量</span>&nbsp;<i class='el-icon-arrow-down'></i></div>`
       })
-      chart.area().position('year*value').color('type', function (val) { return '#53F9FF' }).shape('smooth');
-      chart.line().position('year*value').color('type', function (val) { return '#53F9FF' }).size(2).shape('smooth');
+      chart.area().position('year*value').color('type', function(val) { return '#53F9FF' }).shape('smooth')
+      chart.line().position('year*value').color('type', function(val) { return '#53F9FF' }).size(2).shape('smooth')
       chart.guide().html({
         position: ['5%', '-25%'],
         html: '<div class="chart5-title"><p class="title">上线活跃用户</p></div>'
       })
-      chart.render();
+      chart.render()
     }
   }
 }

VUECODE/smart-property-manage/src/components/chart/chart7.vue

 <template>
-  <div id="node7"></div>
+  <div id="node7"/>
 </template>
 
 <script>
 import G2 from '@antv/g2'
-import DataSet from '@antv/data-set'
 
 export default {
-  mounted () {
+  mounted() {
     this.rander()
   },
   methods: {
-    rander () {
+    rander() {
       var data = [{
         type: '公告',
         sales: 500
       }, {
         type: '帖子',
         sales: 1000
-      }];
+      }]
       var chart = new G2.Chart({
         container: 'node7',
         forceFit: true,
         height: 282,
         padding: [80, 20, 30, 40]
-      });
-      chart.source(data);
+      })
+      chart.source(data)
       chart.scale('', {
         tickInterval: 200
-      });
+      })
       chart.guide().html({
         position: ['5%', '-25%'],
         html: '<div class="chart7-title"><p class="title">内容运营统计</p></div>'
       chart.axis('sales', {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5', // 设置线的颜色
+          stroke: '#a4b6c5' // 设置线的颜色
         },
         grid: null,
         label: {
             textBaseline: 'middle' // 文本基准线，可取 top middle bottom，默认为middle
           }
         }
-      });
+      })
       chart.axis('type', {
         line: {
           lineWidth: 1, // 设置线的宽度
-          stroke: '#a4b6c5', // 设置线的颜色
+          stroke: '#a4b6c5' // 设置线的颜色
         },
         grid: null,
         label: {
           textStyle: {
             fill: '#a4b6c5', // 文本的颜色
-            fontSize: '12', // 文本大小
+            fontSize: '12' // 文本大小
           }
         }
-      });
-      chart.interval().position('type*sales').color('type', function (val) {
+      })
+      chart.interval().position('type*sales').color('type', function(val) {
         if (val === '公告') {
-          return '#53F9FF';
+          return '#53F9FF'
         } else if (val === '活动') {
-          return '#FF5367';
+          return '#FF5367'
         }
-        return '#3F688D';
-      });
-      chart.render();
+        return '#3F688D'
+      })
+      chart.render()
     }
   }
 }

VUECODE/smart-property-manage/src/router/index.js

         name: 'owner-index',
         meta: { title: '已认证业主', icon: 'building' }
       },
-      // {
-      //   path: '/banner/infoBanner',
-      //   component: () => import('@/views/banner/infoBanner/index'),
-      //   name: 'banner-info',
-      //   hidden: true,
-      //   meta: { title: '查看banner', icon: 'table' }
-      // }
+      {
+        path: '/building/batch',
+        component: () => import('@/views/building/batch/batchImport'),
+        name: 'batch-import',
+        hidden: true,
+        meta: { title: '批量导入楼栋信息', icon: 'table' }
+      }
     ]
   },
 

VUECODE/smart-property-manage/src/views/building/batch/batchImport.vue

+
+<template>
+  <div class="root">
+    <el-form :inline="true" :model="listQuery" class="form-listQuery">
+      <el-form-item>
+        <el-upload
+          class="upload-demo"
+          action="https://jsonplaceholder.typicode.com/posts/"
+          :on-preview="handlePreview"
+          :on-remove="handleRemove"
+          :before-remove="beforeRemove"
+          multiple
+          :limit="3"
+          :on-exceed="handleExceed"
+          :file-list="fileList">
+          <el-button style="margin-left: 10px;" size="large" type="primary">下载模板</el-button>
+          <el-button slot="trigger" size="large" type="primary">选取文件并预览</el-button>
+          <el-button style="margin-left: 10px;" size="large" type="success" @click="submitUpload">提交</el-button>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      :data="tableData3"
+      border
+      tooltip-effect="dark"
+      style="width: 100%; margin-top: 20px;"
+      @selection-change="handleSelectionChange">
+      <el-table-column label="栋">
+        <template slot-scope="scope">{{ scope.row.date }}</template>
+      </el-table-column>
+      <el-table-column prop="name" label="单元"/>
+      <el-table-column prop="address" label="楼层"/>
+      <el-table-column prop="address" label="户号"/>
+      <el-table-column prop="address" label="业主姓名"/>
+      <el-table-column prop="address" label="手机号码"/>
+    </el-table>
+    <div class="block">
+      <el-pagination
+        :current-page="listQuery.pageNum"
+        :page-sizes="[5, 10, 20, 30]"
+        :page-size="listQuery.pageSize"
+        :total="40"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      listQuery: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      currentPage4: 4
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+    },
+    dialogBatchImport() {
+      this.$router.push({ name: 'batch-import' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.root{
+  display: flex;
+  flex-flow: column;
+}
+.form-listQuery{
+  margin-top: 20px;
+  margin-left: 30px;
+}
+.operation{
+  display: flex;
+  justify-content: space-between;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.block{
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+</style>
+

VUECODE/smart-property-manage/src/views/building/index.vue

         <el-button type="danger">删除</el-button>
       </div>
       <div>
-        <el-button type="primary">下载模板</el-button>
-        <el-button type="success">批量导入</el-button>
+        <el-button type="success" @click="dialogBatchImport">批量导入楼栋信息</el-button>
       </div>
     </div>
     <el-table
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`)
+    },
+    dialogBatchImport(){
+      this.$router.push({ name: 'batch-import'})
     }
   }
 }

VUECODE/smart-property-manage/src/views/index/index.vue

 <template>
   <div class="main">
     <div class="left">
-      <chart1></chart1>
-      <chart2></chart2>
-      <chart3></chart3>
+      <chart1/>
+      <chart2/>
+      <chart3/>
     </div>
     <div class="middle">
-      <chart4></chart4>
+      <chart4/>
     </div>
     <div class="right">
-      <chart5></chart5>
-      <chart6></chart6>
-      <chart7></chart7>
+      <chart5/>
+      <chart6/>
+      <chart7/>
     </div>
   </div>
 </template>
     chart5,
     chart6,
     chart7
-  },
+  }
 }
 
 </script>