Commit 8dddb1d8 authored by 黄媛媛's avatar 黄媛媛
parents e8b11411 d4e37966
......@@ -7,9 +7,13 @@
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate, no-store">
<meta http-equiv="Expires" content="0">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZzGBZF6L0sgFDLlDohyvYhCnWy4dwksX" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ZzGBZF6L0sgFDLlDohyvYhCnWy4dwksX" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> -->
<script type="text/javascript" src="static/MarkerClusterer.js"></script>
<script type="text/javascript" src="static/CurveLine.min.js"></script>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyAZ5MIfzicStzKbIkbI3RcBBeZBjQFKsp0&language=zh-CN"></script>
<title>四川和平国际旅行社</title>
</head>
<body>
......
......@@ -520,7 +520,7 @@ tr._item_list td:last-child {
<el-option value="3" v-if="isShowType" label="单办签证"></el-option>
<el-option value="2" label="国际机票"></el-option>
<el-option value="4" label="国内票务"></el-option>
<el-option value="5" v-if="isShowType" label="散卖机票"></el-option>
<!-- <el-option value="5" v-if="isShowType" label="散卖机票"></el-option> -->
<el-option value="6" v-if="isShowType" label="日本地接部专户"></el-option>
<el-option value="12" v-if="isShowType" label="日本地接部专户(人民币)"></el-option>
<el-option value="7" v-if="isShowType" label="老挝地接部专户"></el-option>
......@@ -529,6 +529,7 @@ tr._item_list td:last-child {
<el-option value="10" v-if="isShowType" label="景点门票"></el-option>
<el-option value="11" v-if="isShowType" label="餐厅美食"></el-option>
<el-option value="13" label="机票折让收入"></el-option>
<el-option value="14" label="单机票收入"></el-option>
</el-select>
</el-form-item>
</el-col>
......@@ -664,6 +665,7 @@ Vue.component("TCIDJump", {
<span style="cursor: pointer" v-if="rowData.DataType===9">{{rowData.TCID}}</span>
<span style="cursor: pointer" v-if="rowData.DataType===10">{{rowData.TCID}}</span>
<span style="cursor: pointer" v-if="rowData.DataType===11">{{rowData.TCID}}</span>
<span style="cursor: pointer" v-if="rowData.DataType===14" @click="goSAirRec('TicketManager',rowData)">{{rowData.TCID}}</span>
</div>
`,
......@@ -704,6 +706,7 @@ Vue.component("TCNUMJump", {
<span style="cursor: pointer;text-decoration:underline" v-if="rowData.DataType===7" @click="goRec('RecPayQuery',rowData)">{{rowData.TCNUM}}</span>
<span style="cursor: pointer;text-decoration:underline" v-if="rowData.DataType===12" @click="goRec('RecPayQuery',rowData)">{{rowData.TCNUM}}</span>
<span style="cursor: pointer;text-decoration:underline" v-if="rowData.DataType===13" @click="goRec('RecPayQuery',rowData)">机票折让{{rowData.TCNUM}}</span>
<span style="cursor: pointer;text-decoration:underline" v-if="rowData.DataType===14" @click="goSAirRec('TicketManager',rowData)">{{rowData.TCNUM}}</span>
<span style="cursor: pointer;text-decoration:underline" v-if="rowData.DataType===8" @click="goAIR('RecPayQuery',rowData)">{{rowData.TCNUM}}</span>
<span style="cursor: pointer;text-decoration:underline" v-if="rowData.DataType===9">{{rowData.TCNUM}}</span>
<span style="cursor: pointer;text-decoration:underline" v-if="rowData.DataType===10">{{rowData.TCNUM}}</span>
......@@ -756,6 +759,13 @@ Vue.component("TCNUMJump", {
query: {'air':'air','StartDate':StartDate,"BankID":17,blank: "y"}
});
},
goSAirRec(path,rowData){
this.$router.push({
path: "/" + path,
query: {'id':rowData.TCID,blank: "y"}
});
},
goUrl(path, id) {
this.$router.push({
......
......@@ -3,10 +3,35 @@
width: 100%;
height: 100%;
}
.color-info{
position: absolute;
left: 30px;
top: 15px;
padding: 10px 20px;
background-color: rgba(206, 206, 206, .5);
}
.color-info>span{
font-size: 14px;
padding-right: 15px;
}
.color-info .raius-color{
height: 10px;
width: 10px;
display: inline-block;
background-color: #1eb3ff;
border-radius: 50%;
}
.color-info .g .raius-color{
background-color: #5fffa3;
}
</style>
<template>
<div class="customerMap">
<div :style="{height:'100%',width:'100%'}" ref="myEchart" id="centerMpBaidu"></div>
<div class="color-info">
<span class="b">正式: <span class="raius-color"></span></span>
<span class="g">非正式: <span class="raius-color"></span></span>
</div>
</div>
</template>
<script>
......@@ -15,121 +40,80 @@ export default {
return {
map: {},
baiduMapData: [],
centerP: null
centerP: null,
options0: {
size: BMAP_POINT_SIZE_BIGGER,
shape: BMAP_POINT_SHAPE_CIRCLE,
color: '#1eb3ff'
},
options1: {
size: BMAP_POINT_SIZE_BIGGER,
shape: BMAP_POINT_SHAPE_CIRCLE,
color: '#5fffa3'
},
list0: [],
list1: [],
};
},
methods: {
creatMap(arr, type){
let _this = this
let data = this.baiduMapData;
//实例化,并设置最大最小缩放层级
let map = map = new BMap.Map("centerMpBaidu", {
this.map = new BMap.Map("centerMpBaidu", {
minZoom: 3,
maxZoom: 20,
});
//设置中心点、默认缩放层级
if (_this.centerP) {
map.centerAndZoom(new BMap.Point(_this.centerP.Lng, _this.centerP.Lat), 10);
this.map.centerAndZoom(new BMap.Point(_this.centerP.Lng, _this.centerP.Lat), 10);
} else {
map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
this.map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
}
this.map.setMapStyleV2({
styleId: '33046c341768c2774ab011cc7cf013d1'
});
//可以鼠标缩放
map.enableScrollWheelZoom(true);
const points = data
const markerClusterers = [[], [], []]
this.map.enableScrollWheelZoom(true);
const points = this.baiduMapData;
const markerClusterers = [[], [], []];
let list0 = [], list1 = [], list2 = [];
points.forEach(item => {
//实例化点
const point = new BMap.Point(item.Lng, item.Lat)
//自定义点的样式
// type 0 激活 绿色 20191125022113414
// 1 未拜访 紫色 20191125022118834
// 2 未激活 蓝色 20191125022116319
const icon = new BMap.Icon(
item.type === 0 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022113414.png' : item.type === 1 ? 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022118834.png' : 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022116319.png',
new BMap.Size(34, 34)
);
//生成点标注
const marker = new BMap.Marker(point, { icon: icon });
// const infoWindow = new BMap.InfoWindow('简易的信息窗口')
//绑定事件,显示窗口
marker.addEventListener("click", function(){
_this.markerClick(point, item)
});
markerClusterers[item.type || 0].push(marker)
//添加点标注即添加覆盖物
map.addOverlay(marker);
})
// //2种聚合的实现
const size = new BMap.Size( 34, 34 )
var markerClusterer1 = new window.BMapLib.MarkerClusterer(map, {
markers: markerClusterers[1],
styles: [{
url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022118834.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022118834.png',
size: size,
textSize: 16,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022118834.png',
size: size,
textSize: 14,
textColor: 'white',
}]
})
var markerClusterer2 = new window.BMapLib.MarkerClusterer(map, {
markers: markerClusterers[2],
styles: [{
url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022116319.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022116319.png',
size: size,
textSize: 16,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022116319.png',
size: size,
textSize: 14,
textColor: 'white',
}]
})
var markerClusterer4 = new window.BMapLib.MarkerClusterer(map, { markers: markerClusterers[0],
styles: [{
url:'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022113414.png',
size: size,
textSize: 18,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022113414.png',
size: size,
textSize: 16,
textColor: 'white',
}, {
url: 'http://imgfile.oytour.com/New/Upload/Cloud/2019-11/20191125022113414.png',
size: size,
textSize: 14,
textColor: 'white',
}] })
this.map = map
},
markerClick(point, item){
this.apipost('financestatistics_post_GetCustomerInfoForB2BKB', {CustomerId: item.CustomerId}, res=>{
if(res.data.resultCode == 1) {
const infoWindow = new BMap.InfoWindow(`
<p>联系人:${res.data.data.Contact}</p>
<p>联系电话:${res.data.data.ContactNumber}</p>
<p>门店名称:${res.data.data.CustomerName}</p>
<p>门店地址:${res.data.data.Address}</p>
`)
this.map.openInfoWindow(infoWindow, point);
let obj = new BMap.Point(item.Lng, item.Lat)
obj.CustomerId = item.CustomerId
if(item.type == 0) {
list0.push(obj)
} else if (item.type == 1){
list1.push(obj)
}
})
this.list0 = list0;
this.list1 = list1;
this.changePointsColor(this.list0,this.options0);
this.changePointsColor(this.list1,this.options1);
},
changePointsColor(points, options){
var map = this.map;
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
map.addOverlay(pointCollection); // 添加Overlay
this.markerClick(pointCollection);// 给点添加点击事件
},
markerClick(pointCollection){
var _this = this;
var map = this.map;
var data = this.markdatas;
pointCollection.addEventListener('click', function (e) {
_this.apipost('financestatistics_post_GetCustomerInfoForB2BKB', {CustomerId: e.point.CustomerId}, res=>{
if(res.data.resultCode == 1) {
const infoWindow = new BMap.InfoWindow(`
<p style="font-size: 14px;">联系人:${res.data.data.Contact}</p>
<p style="font-size: 14px;">联系电话:${res.data.data.ContactNumber}</p>
<p style="font-size: 14px;">门店名称:${res.data.data.CustomerName}</p>
<p style="font-size: 14px;">门店地址:${res.data.data.Address}</p>
`)
_this.map.openInfoWindow(infoWindow, e.point);
}
})
});
}
},
mounted() {
......@@ -148,13 +132,13 @@ export default {
x.type = 0
})
data.InActiveList.map(x=>{
x.type = 2
x.type = 0
})
data.NotVisit.map(x=>{
x.type = 1
})
// let baiduMapData = [...data.ActivateList, ...data.InActiveList, ...data.NotVisit];
let baiduMapData = [...data.NotVisit, ...data.ActivateList];
let baiduMapData = [...data.ActivateList, ...data.InActiveList, ...data.NotVisit];
// let baiduMapData = [...data.NotVisit, ...data.ActivateList];
this.baiduMapData = baiduMapData
this.creatMap()
}
......
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