分公司列表

src/App.vue

@@ -18,6 +18,7 @@
     width: 100%;
     z-index: 9999;
     background: #fff;
+    padding: 10px 0;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #ccc;

src/main.js

@@ -25,6 +25,39 @@ import XEUtils from 'xe-utils';//加入常用工具类
 import VXEUtils from 'vxe-utils';//加入常用工具类
 import BaiduMap from 'vue-baidu-map'
 import '../node_modules/echarts/map/js/china.js' // 引入中国地图数据
+import '../node_modules/echarts/map/js/province/aomen.js'
+import '../node_modules/echarts/map/js/province/beijing.js'
+import '../node_modules/echarts/map/js/province/chongqing.js'
+import '../node_modules/echarts/map/js/province/fujian.js'
+import '../node_modules/echarts/map/js/province/gansu.js'
+import '../node_modules/echarts/map/js/province/guangdong.js'
+import '../node_modules/echarts/map/js/province/guangxi.js'
+import '../node_modules/echarts/map/js/province/guizhou.js'
+import '../node_modules/echarts/map/js/province/hainan.js'
+import '../node_modules/echarts/map/js/province/hebei.js'
+import '../node_modules/echarts/map/js/province/heilongjiang.js'
+import '../node_modules/echarts/map/js/province/henan.js'
+import '../node_modules/echarts/map/js/province/hubei.js'
+import '../node_modules/echarts/map/js/province/hunan.js'
+import '../node_modules/echarts/map/js/province/jiangsu.js'
+import '../node_modules/echarts/map/js/province/jiangxi.js'
+import '../node_modules/echarts/map/js/province/jilin.js'
+import '../node_modules/echarts/map/js/province/liaoning.js'
+import '../node_modules/echarts/map/js/province/neimenggu.js'
+import '../node_modules/echarts/map/js/province/ningxia.js'
+import '../node_modules/echarts/map/js/province/qinghai.js'
+import '../node_modules/echarts/map/js/province/shandong.js'
+import '../node_modules/echarts/map/js/province/shanghai.js'
+import '../node_modules/echarts/map/js/province/shanxi.js'
+import '../node_modules/echarts/map/js/province/shanxi1.js'
+import '../node_modules/echarts/map/js/province/sichuan.js'
+import '../node_modules/echarts/map/js/province/taiwan.js'
+import '../node_modules/echarts/map/js/province/tianjin.js'
+import '../node_modules/echarts/map/js/province/xianggang.js'
+import '../node_modules/echarts/map/js/province/xinjiang.js'
+import '../node_modules/echarts/map/js/province/xizang.js'
+import '../node_modules/echarts/map/js/province/yunnan.js'
+import '../node_modules/echarts/map/js/province/zhejiang.js'
 
 // register globally
 Vue.component('multiselect', Multiselect);

src/views/baseInfo/companyInfo/chinaMap.vue

 
 <template>
-  <div :class="className" :style="{height:height,width:width}"></div>
+  <div id="map" style="height:330px;width:100%"></div>
 </template>
 
 <script>
@@ -14,33 +14,53 @@
   import { debounce } from 'utils';
 
   export default {
-    props: {
-      className: {
-        type: String,
-        default: 'chart'
-      },
-      width: {
-        type: String,
-        default: '100%'
-      },
-      height: {
-        type: String,
-        default: '330px'
-      },
-      autoResize: {
-        type: Boolean,
-        default: true
-      }
-    },
+    props:["list", "provinceName"],
+//    props: {
+//      list: [],
+//      className: {
+//        type: String,
+//        default: 'chart'
+//      },
+//      width: {
+//        type: String,
+//        default: '100%'
+//      },
+//      height: {
+//        type: String,
+//        default: '330px'
+//      },
+//      autoResize: {
+//        type: Boolean,
+//        default: true
+//      }
+//    },
     data() {
       return {
+        mapType: "china",
         chart: null,
         clientWidth: 350,
         clientHeight:500
       };
     },
+    watch: {
+      list: {
+        handler(newValue, oldValue) {
+          this.initChart("china");
+          console.log(newValue);
+        },
+        deep: true
+      },
+      provinceName(newValue, oldValue) {
+        if(newValue == "china"){
+          this.chart = null;
+          this.initChart("china");
+        }
+      },
+    },
     mounted() {
-      this.initChart();
+      console.log(this.list);
+//      console.log(this.provinceName);
+      this.initChart("china");
       if (this.autoResize) {
         this.__resizeHanlder = debounce(() => {
           if (this.chart) {
@@ -72,59 +92,78 @@
       this.chart = null
     },
     methods: {
-      initChart() {
-        let that = this;
+      initChart(target) {
+        let that = this;debugger
+        var markPointData = this.list;
+        markPointData.map(function(item){debugger
+          item.coord = [item.longitude, item.latitude];
+        });
         var mydata = getSonRegionByCodes(1);
         this.chart = echarts.init(this.$el, 'macarons');
-        this.chart.setOption({
+        var option = {
           title: {
-//            text: '全国地图大数据',
             subtext: '',
             x:'center'
           },
           tooltip : {
             trigger: 'item'
           },
-
-          //左侧小导航图标
-//          visualMap: {
-//            show : true,
-//            x: 'left',
-//            y: 'center',
-//            splitList: [
-//              {start: 500, end:600},{start: 400, end: 500},
-//              {start: 300, end: 400},{start: 200, end: 300},
-//              {start: 100, end: 200},{start: 0, end: 100},
-//            ],
-//            color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
-//          },
-          //配置属性
-          series: [{
-            name: '数据',
-            type: 'map',
-            mapType: 'china',
-            roam: true,
-            label: {
+          series: [{ //系列列表
+            name: "中国",
+            type: "map",
+            mapType: target,
+            roam: true,//缩放
+            zoom: 1.2,
+            label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
               normal: {
-                show: true  //省份名称
+                show: true
               },
               emphasis: {
                 show: false
               }
             },
-            data:mydata  //数据
+            effect : {
+              show: true,
+              shadowBlur : 0
+            },
+            markPoint: { //图表标注。
+              symbol: 'image://https://xxmp.upyuns.com/attachment/images/6/2019/04/DkmpHZN172505Hq68HvpNYKA5DS7qm.png',
+              symbolSize: 14,//图形大小
+              label: {
+                normal: {
+                  show: false,
+                },
+                emphasis: {
+                  show: false,
+                }
+              },
+              data: markPointData
+            }
           }],
+          mapLocation : {
+             x : 'left'
+         },
           grid:{
             x:0,
             y:0,
             x2:0,
             y2:0
           }
-        });
+        };
+        this.chart.setOption(option);
         this.chart.on('click', function(param) {
+          if(param.seriesName == "中国"){
             let mydata = getSonRegionByCodes(1);
             var name = param.name;
+//            if(!name){
+//              return;
+//            }
             let provinceId = 0;
+//            option.series[0].name="省份";
+//            option.series[0].mapType = name;
+//            that.mapType = name;
+//            that.chart.clear();
+//            that.chart.setOption(option);
             mydata.map(function(item){
               console.log(item.name.indexOf(name));
               if(item.name.indexOf(name) !=-1){
@@ -132,6 +171,7 @@
               }
             });
             that.$emit('headCallBack', provinceId);
+          }
         });
       }
     }

src/views/baseInfo/companyInfo/index.vue

@@ -6,11 +6,11 @@
       <span class="header-title">公司列表</span>
     </div>
     <div class="main-container">
-
       <div class="shoppings main-container">
         <div class="filter-container" ref="filter-container">
           <el-form :rules="rules4Query" ref="queryForm" style="display: flex;" :inline="inline" :model="listQuery">
             <el-select class="filter-item" style="width: 70%;margin-right: 10px;" v-model="listQuery.addrProvince" placeholder="请选择省份（直辖市）" @change='getValue'>
+              <el-option :key="undefined" label="全国" :value="undefined"></el-option>
               <el-option v-for="item in provinceRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
             </el-select>
             <el-select class="filter-item" v-model="listQuery.addrCity" placeholder="请选择城市"  @change='getCompanyList'>
@@ -19,18 +19,20 @@
           </el-form>
         </div>
       </div>
+      <!--分公司分布图-->
+      <!--<company-map :toSonData="list"></company-map>-->
       <!--地图-->
-      <china-map v-on:headCallBack="headCall"></china-map>
+      <china-map v-on:headCallBack="headCall" :list="list" :provinceName="provinceName"></china-map>
       <!--分公司数据-->
       <div class="shoppings company-list"
            v-for="item in list"
            :key="item.key"
       >
-        <div class="item-right-p">
-          <h3 class="ellipsis">{{item.name}}</h3>
+        <div class="item-right-p company-item">
+          <div class="ellipsis company-name">{{item.name}}</div>
           <p class="ellipsis">负责人：{{item.leader}}</p>
-          <p class="ellipsis">联系电话(公司)：{{item.leaderContactInfo}}</p>
           <p>地址： {{item.address + item.addrDetail}}</p>
+          <p class="ellipsis">电话：{{item.leaderContactInfo}}</p>
         </div>
       </div>
       <div class="tip-css" v-if="nodata">
@@ -47,6 +49,20 @@
     text-align: center;
     width: 100%;
   }
+  .company-name{
+    font-size: 16px;
+    color: #333;
+    font-weight: 600;
+  }
+  .company-item{
+    border-bottom: 1px solid #ccc;
+    padding: 5px 0;
+  }
+  .company-item p{
+    font-size: 13px;
+    color: #666;
+    padding-left: 0 !important;
+  }
 </style>
 <script>
 
@@ -60,6 +76,7 @@
     putObj
   } from 'api/base_info/branch_company';
   import chinaMap from './chinaMap';
+  import companyMap from './companyMap';
 
   import {
     getSonRegionByCodes,
@@ -67,14 +84,19 @@
   } from 'api/base_info/region/';
 
   import {mapGetters} from 'vuex';
+  import BmMap from "../../../../node_modules/vue-baidu-map/components/map/Map.vue";
 
   export default {
     name: 'branchCompany',
-    components: { chinaMap },
+    components: {
+      BmMap,
+      companyMap,
+      chinaMap},
     data() {
       return {
         nodata: false,
         nomore:false,
+        provinceName: "",
         form: {
           id: undefined,
           name: undefined,
@@ -204,7 +226,8 @@
           update: '编辑',
           create: '创建'
         },
-        tableKey: 0
+        tableKey: 0,
+        send: !1,//是否已发送请求
       }
     },
     created() {
@@ -251,7 +274,15 @@
         this.getList();
       },
       getValue(e){
+        if(!e){
+          //全国
+          location.reload();
+//          this.provinceName = "china";
+          return;
+        }
+        this.provinceName = e;
         this.listQuery.addrCity = undefined;
+//        this.getList();
       },
       headCall: function (msg) { //回调方法，接收子组件传的参数
         this.listQuery.addrProvince = msg;
@@ -264,6 +295,9 @@
         return this.companyStatusAndCode[code].val;
       },
       getList(reachBottom) {
+        if(this.send){
+          return;
+        }
         if(!reachBottom){
           this.list = [];
           this.listQuery.page = 1;
@@ -274,6 +308,7 @@
             return false
           }
         }
+        this.send = !0;
         page(this.listQuery)
           .then(response => {
             let listTemp = response.data.data;
@@ -305,6 +340,7 @@
             }else if(arr.length < this.listQuery.page*this.listQuery.limit){
               this.nomore = true;
             }
+            this.send = !1;
           })
       },
       getAddrStr(branchCompany) {

src/views/baseInfo/stockCrowd/index.vue

@@ -39,9 +39,9 @@
           @click="view(item.id, item.companyName)"
         >
           <div class="item-right-p flex-jcc-aic">
-            <img :src="item.companyPic" style="width: 130px;height:90px;border-radius: 10px;"/>
+            <img :src="item.companyPic" style="width: 130px;height:100px;border-radius: 10px;"/>
             <div style="height: 90px;padding-left: 10px;width: 100%;">
-              <div style="height: 30px;">{{item.companyName}}</div>
+              <div style="line-height: 20px;">{{item.companyName}}</div>
               <div class="flex-jcb-aic">
                 <div
                   style="position: relative;background: #ccc;border-radius: 10px;height: 10px;width: 100px;margin-right: 20px;">