Skip to content

C
cloud-platform-ui
Commit 47d80351 authored by lixy's avatar lixy
Browse files
Options

分公司列表

parent d9198875
Show whitespace changes
Inline Side-by-side
Showing with 176 additions and 66 deletions
src/App.vue
View file @ 47d80351
......@@ -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
View file @ 47d80351
......@@ -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
View file @ 47d80351
<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
View file @ 47d80351
......@@ -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
View file @ 47d80351
......@@ -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;">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment