baidumap

package.json

@@ -32,6 +32,7 @@
     "viewerjs": "^1.9.0",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
+    "vue-bmap-gl": "^0.1.2",
     "vue-router": "3.4.9",
     "vuex": "3.6.0",
     "vuex-persistedstate": "^4.0.0",

src/main.js

@@ -10,12 +10,11 @@ import router from './router'
 
 import '@/icons' // 引入icon文件夹下所有的svg
 
+
+
 // import VueAMap from 'vue-amap'
 import VueAMap from '@vuemap/vue-amap';
 import '@vuemap/vue-amap/dist/style.css'
-
-Vue.use(ElementUI)
-
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: '71cdeafd6ae271e523d4f46cd6f27b0f', // 此处的key,在高德开放平台申请
@@ -23,6 +22,16 @@ VueAMap.initAMapApiLoader({
   securityJsCode: '00718d70da54e9abb87550e2a043ae0f'
 })
 
+import VueBMap from 'vue-bmap-gl';
+import 'vue-bmap-gl/dist/style.css'
+Vue.use(VueBMap);
+VueBMap.initBMapApiLoader({
+  ak: 'qqdUS2cGyThesPRPKWWbXG2G',
+  v: '1.0'
+});
+
+Vue.use(ElementUI)
+
 Vue.config.productionTip = false
 new Vue({
   el: '#app',

src/router/index.js

@@ -22,7 +22,12 @@ export const constantRoutes = [{
   }, {
     path: '/map',
     component: () => import('@/views/map/index.vue'),
-    name: 'map'
+    name: 'MapVueAMap'
+
+  }, {
+    path: '/bdmap',
+    component: () => import('@/views/map/bdmap.vue'),
+    name: 'MapVueBdMap'
 
   }, {
     path: '/login',

src/views/map/bdmap.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="app-container">
+    <el-bmap :center="center" :zoom="zoom">
+      <el-bmap-marker
+        v-for="(marker, index) in markers"
+        :key="index"
+        :icon="marker.icon"
+        :position="marker.position"
+        :title="marker.title"
+        :vid="index"
+        @click="(e) => {clickArrayMarker(marker, e)}"
+      />
+    </el-bmap>
+    <div class="toolbar">
+      <el-collapse v-model="activeNames">
+        <el-collapse-item name="info">
+          <template slot="title">
+            <i class="el-icon-s-shop" /> 当前选中门店信息
+          </template>
+          <el-descriptions :column="1" size="mini" border>
+            <el-descriptions-item :label-style="{'width': '70px'}" label="序号">{{ currentStore.serNumber }}</el-descriptions-item>
+            <el-descriptions-item label="门店名称">{{ currentStore.name }}</el-descriptions-item>
+            <el-descriptions-item label="门店地址">{{ currentStore.address }}</el-descriptions-item>
+            <el-descriptions-item label="门店面积">{{ currentStore.area }}</el-descriptions-item>
+            <el-descriptions-item label="是否尽调">{{ currentStore.dueDiligence }}</el-descriptions-item>
+          </el-descriptions>
+        </el-collapse-item>
+        <el-collapse-item title="" name="list">
+          <template slot="title">
+            <i class="el-icon-s-grid" /> 门店列表<el-button style="margin-left: 20px;padding: 3px 0" type="text" @click.stop="showUploadXlsx">更新门店数据</el-button>
+          </template>
+          <el-form ref="form" :model="queryParams" label-width="70px" size="mini">
+            <el-form-item label="门店名称">
+              <el-input v-model="queryParams.name" clearable @clear="dosearch">
+                <el-button slot="append" icon="el-icon-search" @click="dosearch" />
+              </el-input>
+            </el-form-item>
+            <el-form-item label="是否尽调">
+              <el-radio-group v-model="queryParams.jindiao" @input="dosearch">
+                <el-radio label="全部" />
+                <el-radio label="是" />
+                <el-radio label="否" />
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="营业面积">
+              <el-input v-model="queryParams.areaStar" clearable @clear="dosearch">
+                <template slot="prepend">大于等于</template>
+              </el-input>
+              <el-input v-model="queryParams.areaEnd" clearable @clear="dosearch">
+                <template slot="prepend">小于等于</template>
+                <el-button slot="append" icon="el-icon-search" @click="dosearch" />
+              </el-input>
+            </el-form-item>
+          </el-form>
+
+          <el-table v-loading="tableLoading" :data="dataList" border style="width: 100%;margin-top: 10px;" max-height="400">
+            <el-table-column prop="name" label="门店名称" align="center" />
+            <el-table-column prop="dueDiligence" label="是否尽调" align="center" width="90" />
+          </el-table>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+
+    <div class="chartsa">
+      <el-collapse v-model="activeNamesChart">
+        <el-collapse-item name="pie">
+          <template slot="title">
+            <i class="el-icon-pie-chart" /> 尽调比例
+          </template>
+          <div ref="charta" style="height:240px;width: 100%;" />
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <el-dialog title="上传《门店信息.xlsx》" :visible.sync="uploadDialogVisible" width="40%" :before-close="dialogClose">
+      <el-card class="box-card">
+        <div>
+          <el-upload
+            ref="upload"
+            class="upload-demo"
+            :action="updateAction"
+            :on-progress="handleProgress"
+            :on-success="handleSuccess"
+            :file-list="fileList"
+            :auto-upload="false"
+            :multiple="false"
+            :limit="1"
+          >
+            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
+            <div slot="tip" class="el-upload__tip">上传 《门店信息.xlsx》文件，文件中数据格式需要按照 <el-button type="text" @click="downtemplate">模板Excel文件</el-button> 中填写，可以点击<el-button
+              size="mini"
+              type="warning"
+            >下载模板Excel文件</el-button> 做为参照。 </div>
+          </el-upload>
+        </div>
+        <el-card class="box-card" shadow="never">
+          <el-descriptions title="文件上传结果" :column="1">
+            <el-descriptions-item label="上传文件名">{{ uploadVo.fileName }}</el-descriptions-item>
+            <el-descriptions-item label="上传开始时间">{{ uploadVo.starTime }}</el-descriptions-item>
+            <el-descriptions-item label="上传用时">{{ uploadVo.useTime }}</el-descriptions-item>
+            <el-descriptions-item label="总记录数">{{ uploadVo.numberAll }}</el-descriptions-item>
+            <el-descriptions-item label="已尽调数">{{ uploadVo.numberTure }}</el-descriptions-item>
+            <el-descriptions-item label="未尽调数">{{ uploadVo.numberFalse }}</el-descriptions-item>
+            <el-descriptions-item label="未知状态数">{{ uploadVo.numberOther }}</el-descriptions-item>
+            <el-descriptions-item v-show="uploadVo.errInfo" label="异常信息">{{ uploadVo.errInfo }}</el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-card>
+      <div slot="footer">
+        <el-button type="primary" plain style="margin-right: 50px;" @click="dialogClose">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  import req from '@/api/gd36524/store'
+  export default {
+    name: 'MapVueBdMap',
+    data() {
+      return {
+        charta: null,
+        notChartData: true,
+        activeNames: ['info', 'list'],
+        activeNamesChart: ['pie'],
+        mapicon: {
+          red: process.env.VUE_APP_PUBLIC_PATH + 'image/icon_local_red.png',
+          blue: process.env.VUE_APP_PUBLIC_PATH + 'image/icon_local_blue.png'
+        },
+        tplpath: process.env.VUE_APP_PUBLIC_PATH + 'datatemplate.xlsx',
+        uploadDialogVisible: false,
+        uploadVo: {
+          fileName: '',
+          starTime: '',
+          useTime: '',
+          numberAll: '',
+          numberTure: '',
+          numberFalse: '',
+          numberOther: '',
+          errInfo: ''
+        },
+        updateAction: process.env.VUE_APP_BASE_API + '/store/uploadData',
+        fullscreenloading: null,
+        fileList: [],
+
+        queryParams: {
+          name: '',
+          areaStar: '',
+          areaEnd: '',
+          jindiao: '全部'
+        },
+        dataList: [],
+        tableLoading: false,
+
+        controlVisible: false,
+        zoom: 13,
+        center: [114.490788, 38.033577],
+        markers: [],
+        currentStore: {
+          serNumber: '',
+          name: '',
+          address: '',
+          area: '',
+          dueDiligence: ''
+        }
+      }
+    },
+    created() {
+      this.loadList()
+    },
+    mounted() {
+      // this.$nextTick(() => {
+      //   this.initCharta()
+      // })
+    },
+    beforeDestroy() {
+      if (this.charta) {
+        this.charta.dispose()
+        this.charta = null
+      }
+    },
+    methods: {
+      initCharta(listdata) {
+        this.notChartData = false
+        var x = 0
+        var y = 0
+        for (var i in listdata) {
+          if (listdata[i].dueDiligence === '是') {
+            x++
+          } else {
+            y++
+          }
+        }
+        const _dataX = []
+        _dataX.push({
+          value: x,
+          name: '已尽调'
+        })
+        _dataX.push({
+          value: y,
+          name: '未尽调'
+        })
+
+        this.charta = echarts.init(this.$refs.charta)
+        this.charta.setOption({
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left'
+          },
+          series: [{
+            name: '门店数量',
+            type: 'pie',
+            radius: '50%',
+            data: _dataX
+          }]
+        })
+      },
+      loadList() {
+        req.list(this.queryParams).then(res => {
+          this.dataList = res.data
+          this.resetMarkers()
+          if (this.notChartData) {
+            this.initCharta(res.data)
+          }
+        }).catch(e => {
+          console.log('GdinventoryLog-loadList-ee:', e)
+        })
+      },
+      dosearch() {
+        this.loadList()
+      },
+      resetQuery() {
+        this.queryParams = {
+          name: '',
+          areaStar: '',
+          areaEnd: '',
+          jindiao: '全部'
+        }
+        this.loadList()
+      },
+      resetMarkers() {
+        this.markers = []
+        for (var i in this.dataList) {
+          const d = this.dataList[i]
+          let nicon = this.mapicon.blue
+          if (d.dueDiligence === '是') {
+            nicon = this.mapicon.red
+          }
+          const mapicon = { url: nicon, size: [20, 28], imageOffset: [0, 0], anchor: [0, 0] }
+          const newMarker = {
+            id: d.sid,
+            position: [d.lng, d.lat],
+            title: d.name,
+            icon: mapicon,
+            label: {
+              direction: 'bottom',
+              offset: [0, 5], // 设置文本标注偏移量
+              content: "<div class='info'>" + d.name + '</div>' // 设置文本标注内容
+            }
+          }
+          this.markers.push(newMarker)
+        }
+      },
+      showUploadXlsx() {
+        this.uploadDialogVisible = true
+      },
+      downtemplate() {
+        window.open(this.tplpath, '_blank')
+      },
+      submitUpload() {
+        this.$refs.upload.submit()
+      },
+      handleProgress(event, file, fileList) {
+        const _this = this
+        this.fullscreenloading = this.$loading({
+          lock: true,
+          text: '文件正在上传',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        console.log('111', event.percent)
+        if (event.percent >= 100) {
+          _this.fullscreenloading.text = '上传完成，正在导入数据库'
+        }
+      },
+      handleSuccess(resp, file, fileList) {
+        console.log('222', resp)
+        const _this = this
+        if (this.fullscreenloading) this.fullscreenloading.close()
+        this.fullscreenloading = null
+        _this.uploadVo = resp.data
+        _this.notChartData = true
+        _this.loadList()
+        setTimeout(function() {
+          _this.dialogClose()
+        }, 3000)
+      },
+      dialogClose() {
+        this.uploadVo = {
+          fileName: '',
+          starTime: '',
+          useTime: '',
+          numberAll: '',
+          numberTure: '',
+          numberFalse: '',
+          numberOther: '',
+          errInfo: ''
+        }
+        if (this.fullscreenloading) this.fullscreenloading.close()
+        this.fullscreenloading = null
+        this.fileList = []
+        this.uploadDialogVisible = false
+      },
+      clickArrayMarker(marker) {
+        for (var i in this.dataList) {
+          if (marker.id === this.dataList[i].sid) {
+            this.currentStore = this.dataList[i]
+            break
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .app-container {
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .toolbar {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 300px;
+    z-index: 9;
+  }
+
+  .info {
+    position: relative;
+    margin: 0;
+    top: 0;
+    right: 0;
+    min-width: 0;
+  }
+
+  .storelabel {
+    width: 80px
+  }
+
+  .amap-icon img {
+    width: 25px;
+    height: 34px;
+  }
+
+  .chartsa {
+    position: absolute;
+    top: 20px;
+    right: 15px;
+    width: 300px;
+    z-index: 9;
+  }
+</style>

src/views/map/index.vue

@@ -7,7 +7,6 @@
         :key="index"
         :icon="marker.icon"
         :title="marker.title"
-        :label="marker.label"
         :position="marker.position"
         @click="(e) => {clickArrayMarker(marker, e)}"
       />