Skip to content

S
SuperMan
Commit b5fc4bf0 authored by 黄奎's avatar 黄奎
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/luochao/superman

parents d6fbd592 f57d4a8a
Show whitespace changes
Inline Side-by-side
Showing with 253 additions and 207 deletions
src/components/SalesModule/enrollTotal.vue
View file @ b5fc4bf0
......@@ -350,6 +350,7 @@
</p>
<p v-if="item.lureEmpName">引流人：{{ item.lureEmpName }}</p>
<p>{{ $t("hotel.hotel_StartTeam") }}：{{ item.startDate }}</p>
<p>{{item.status==1?"未结团":(item.status==2?"已结团 ":(item.status==5?"待结团审核":""))}}{{item.status==2?item.outGroupAuditDate:""}}</p>
<p v-if="item.tradeWay == 1">{{ item.platformOrder }}</p>
<!-- <p v-if="item.commissionMoney" style="color: red;">
{{ $t("salesModule.CommissionNum") }}：{{ item.commissionMoney }}
......
src/components/SalesModule/groupTourOrder.vue
View file @ b5fc4bf0
......@@ -1692,6 +1692,7 @@
">
{{ item.tcnum }}
</p>
<p class="fz12 over_ellipsis" style="width: 100%">
{{ item.commissionSPeopleName }}
</p>
......@@ -1700,6 +1701,7 @@
{{ $t("hotel.hotel_StartTeam") }}：{{ item.startDate }}
</p>
<p>{{ $t("restaurant.res_oderTime") }}：{{ item.createDate }}</p>
<p>{{item.status==1?"未结团":(item.status==2?"已结团 ":(item.status==5?"待结团审核":""))}}{{item.status==2?item.outGroupAuditDate:""}}</p>
<p v-if="item.tradeWay == 1">{{ item.platformOrder }}</p>
<p v-if="item.commissionMoney" style="color: red;cursor: pointer;">
<span style="float: left;">{{ $t("salesModule.Commission") }}：</span>
......
src/components/myOrdersAllType/components/OrderList.vue
View file @ b5fc4bf0
......@@ -19,6 +19,7 @@
<p class=" fz14" :class="{'cursor-pointer c059FF6':scope.row.OrderType==2}"
@click="scope.row.OrderType==2?goTuanDetails(scope.row):''">{{scope.row.TCNUM}}</p>
<p>出发日期：{{scope.row.StartDate}}</p>
<p v-if="scope.row.OrderType==2">{{scope.row.Status==1?"未结团":(scope.row.Status==2?"已结团 ":(scope.row.Status==5?"待结团审核":""))}}{{scope.row.Status==2?scope.row.OutGroupAuditDate:""}}</p>
</div>
</template>
</el-table-column>
......
src/components/newTravelmanager/TravelGroupControl/tripmap.vue
View file @ b5fc4bf0
<template>
<div class="tripmap-form marginT20" v-if="dataAll">
<div class="row">
<div v-for="(x, index) in TripMapList" ::key="x.Id"
class="row-aic" style="margin-right: 10px;">
<div class="row"
v-loading="setLoading">
<div
v-for="(x, index) in TripMapList"
::key="x.Id"
class="row-aic"
style="margin-right: 10px;"
>
<el-select
class="w100"
size="mini"
placeholder="选择国家"
v-model="x.MId"
@change="SearchCity(x.MId,x,index)"
@change="SearchCity(x.MId, x, index)"
filterable
>
<el-option
......@@ -26,7 +31,7 @@
v-model="x.CityListIds"
multiple
filterable
@change="getCityListIds(x,index)"
@change="getCityListIds(x, index)"
>
<el-option
v-for="(item, i) in x.CityListAll"
......@@ -39,16 +44,35 @@
<el-color-picker
style="vertical-align: middle;"
v-model="x.ColorStr"
@change="AssemblyData"
></el-color-picker>
<div style="margin-left: 5px; font-size: 23px;cursor: pointer;">
<i v-if="index==0" class="el-icon-circle-plus" style="color: #E95252;"
@click="alterCity(x,index,1)"></i>
<i v-if="index!=0" class="el-icon-delete-solid" style="color: gray;"
@click="alterCity(x,index,0)"></i>
<i
v-if="index == 0"
class="el-icon-circle-plus"
style="color: #E95252;"
@click="alterCity(x, index, 1)"
></i>
<i
v-if="index != 0"
class="el-icon-delete-solid"
style="color: gray;"
@click="alterCity(x, index, 0)"
></i>
</div>
</div>
<div
@click="getResultImg"
class="row-aic"
style="cursor: pointer;color: #E95252;"
>
<span>生成图片</span>
</div>
</div>
<div class="relative marginT20" style="height: 500px;border: 1px solid #e6e6e6;">
<div
class="relative marginT20"
style="border: 1px solid #e6e6e6;height:500px"
>
<div id="trip_map" class="map"></div>
</div>
</div>
......@@ -59,10 +83,13 @@ import { Bezier } from "bezier-js";
import worldGeoJSON from "../../../utils/geojson.json";
mapboxgl.accessToken =
"pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q";
import html2Canvas from "html2canvas";
export default {
props: ["dataAll","ConfigId"],
props: ["dataAll", "ConfigId"],
data() {
return {
setLoading: false,
imageUrl: "",
deviceMarkers: [],
loadingCity: false,
loading: false,
......@@ -112,21 +139,20 @@ export default {
{ name: "米哈斯", longitude: -4.637519, latitude: 36.595747 },
{ name: "格拉纳达", longitude: -3.599534, latitude: 37.1735 }
],
TripMapList: []
TripMapList: [],
listCity: []
};
},
watch: {
NationList:{
handler(val, oldVal) {
},
NationList: {
handler(val, oldVal) {},
deep: true,
immediate: false
},
dataAll: {
handler(val, oldVal) {
// console.log(val,'-------')
if(this.NationList.length==0) this.getAddress(1);
if (this.NationList.length == 0) this.getAddress(1);
// console.log(val.TripCountryList,'TripCountryList====',val.TripCitwlist,'----------')
// let arrList = function(list){
// list.forEach(x=>{
......@@ -135,142 +161,65 @@ export default {
// x.CityListIds = []
// })
// }
if(val.TripMapList.length>0){
this.TripMapList = JSON.parse(JSON.stringify(val.TripMapList))
// arrList(this.TripMapList)
let listCity = [];
this.countriesData = [];
this.pois = "";
this.TripMapList.forEach(x => {
let obj = {
MName: x.MName,
ColorStr: x.ColorStr
};
this.countriesData.push(obj);
x.CityList.forEach(y => {
listCity.push(y.MName);
});
});
this.pois = listCity.join(",");
this.citys = [...new Set(this.pois.split(","))];
this.TripMapList.forEach((x)=>{
if(x.MId){
this.SearchCity(x.MId)
}
})
}
},
deep: true,
immediate: true
}
},
computed: {},
mounted() {
if(this.dataAll.TripMapList.length==0){
if (val.TripMapList.length == 0) this.SearchCity(2);
if (val.TripMapList.length > 0) {
this.TripMapList = JSON.parse(JSON.stringify(val.TripMapList));
this.AssemblyData();
} else {
this.TripMapList = [];
let obj = {
CityList: [],
CityListAll: [],
CityListIds: [],
CityListAll: this.CityListAll,
CityListIds: [4, 6],
NationList: this.NationList,
ColorStr: this.dataAll.TripColor?this.dataAll.TripColor:'#409eff',
ColorStr: this.dataAll.TripColor
? this.dataAll.TripColor
: "#409eff",
ConfigId: this.ConfigId,
Id: 0,
MId: null,
MName: null,
MId: 2,
MName: "中国",
MType: 1,
MapLevel: 0,
MapUrl:"",
ParentId: null,
PositionStr:{
MapUrl: "",
ParentId: 0,
PositionStr: {
Bottom: 0,
Left: 0,
Right: 0,
Top: 0,
}
Top: 0
}
this.TripMapList.push(JSON.parse(JSON.stringify(obj)))
};
this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
}
this.initializeData()
},
methods: {
// 更新数据
async AssemblyData(){
let listCity = [];
this.countriesData = [];
this.pois = "";
this.TripMapList.forEach(x => {
let obj = {
MName: x.MName,
ColorStr: x.ColorStr
};
this.countriesData.push(obj);
x.CityList.forEach(y => {
listCity.push(y.MName);
});
});
this.pois = listCity.join(",");
this.citys = [...new Set(this.pois.split(","))];
this.TripMapList.forEach((x)=>{
if(x.MId){
this.SearchCity(x.MId)
}
})
this.countriesData.forEach((x, i) => {
if(this.map&&this.map.getLayer('world-layer-'+i)) {
this.map.removeLayer('world-layer-'+i)
}
})
let poilines = this.pois.split(",");
poilines.forEach((p, i) => {
if (i < poilines.length - 1) {
this.map.removeLayer('curve-layer-'+i)
this.map.removeSource('curve-source-'+i)
}
})
if (this.pois&&this.pois!=''&&this.citys&&this.citys.length>0
&& this.countriesData &&this.countriesData.length > 0&&this.TripMapList.length==this.countriesData.length) {
// this.map.addSource("word-source", {
// type: "geojson",
// data: worldGeoJSON
// });
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
await this.calcCitiesGeoInfoHandler();
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
this.map.fitBounds(bounds, {
padding: 150 // 可选：在地图边界周围添加一些内边距
});
this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记名字
deep: true,
immediate: true
}
},
// 渲染地图
initializeData(){
if (this.pois &&this.citys &&
this.countriesData &&this.countriesData.length > 0) {
computed: {},
mounted() {
this.map = new mapboxgl.Map({
container: "trip_map",
style: "mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b", // 'mapbox://styles/mapbox/light-v9','mapbox://styles/alex9012/clm92pvs1011j01qzexlh6g2b'
center: [2.177432, 41.382894],
zoom: 6
zoom: 6,
preserveDrawingBuffer: true
});
this.map.on("load", async () => {
console.log(this.TripMapList);
this.map.addSource("word-source", {
type: "geojson",
data: worldGeoJSON
});
if (
this.TripMapList &&
this.TripMapList.length > 0 &&
this.TripMapList[0].MName &&
this.TripMapList[0].CityList.length > 0
) {
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
......@@ -280,35 +229,115 @@ export default {
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
console.log(bounds);
this.map.fitBounds(bounds, {
padding: 150 // 可选：在地图边界周围添加一些内边距
});
this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
await this.addCountriesMaker(); //标记名字
await this.addCountriesMaker(); //标记名称
}
});
//this.addDocumentEventListener();
}
// this.initializeData()
},
UpdateMap(){
methods: {
getResultImg() {
this.setLoading = true
let that = this
var postJson = {
ConfigId: this.ConfigId,
};
this.imageUrl = this.map.getCanvas().toDataURL("image/png");
let mapCanvas = document.querySelector(".mapboxgl-canvas");
// mapCanvas.style.display = "none";
html2Canvas(document.getElementById('trip_map')).then(function(canvas) {
var image = document.createElement("a"); //image.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
image.href = canvas.toDataURL("image/png");
let blob = that.base64ToBlob(image.href);
let newArr = [];
newArr.push(blob);
var path = `/Upload/Temporary`;
that.uploadSelfBlob(path, newArr,postJson, x => {
if(x.data.StatusCode==1){
let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
// console.log(allPath,'------')
}
that.setLoading = false
})
return
image.download = "map.png";
image.click();
});
},
// 更新数据
async AssemblyData() {
let listCity = [];
this.listCity = [];
this.countriesData = [];
this.pois = "";
this.TripMapList.forEach(x => {
let obj = {
MName: x.MName,
MId: x.MId,
ColorStr: x.ColorStr
};
this.countriesData.push(obj);
x.CityList.forEach(y => {
listCity.push(y.MName);
this.listCity.push({
MName: y.MName,
MId: y.MId
});
});
});
this.pois = listCity.join(",");
this.citys = [...new Set(this.pois.split(","))];
this.TripMapList.forEach(x => {
if (x.MId) {
this.SearchCity(x.MId);
}
});
this.countriesData.forEach((x, i) => {
if (this.map && this.map.getLayer("world-layer-" + x.MId)) {
this.map.removeLayer("world-layer-" + x.MId);
}
});
let poilines = this.pois.split(",");
this.listCity.forEach((p, i) => {
if (this.map.getLayer("curve-layer-" + p.MId)) {
this.map.removeLayer("curve-layer-" + p.MId);
this.map.removeSource("curve-source-" + p.MId);
}
// if (i < poilines.length - 1) {
// }
});
if (
this.TripMapList &&
this.TripMapList.length > 0 &&
this.TripMapList[0].MName &&
this.TripMapList[0].CityList.length > 0
) {
// 显示国家
this.addCountryFillRange();
// 获取坐标信息
this.calcCitiesGeoInfoHandler();
await this.calcCitiesGeoInfoHandler();
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
bounds.extend([city.longitude, city.latitude]);
});
this.map.fitBounds(bounds, {
padding: 150 // 可选：在地图边界周围添加一些内边距
});
this.map.fitBounds(bounds);
this.map.setCenter(bounds.getCenter());
this.addMarker(); //标记
this.createLineHandler(); //连线
this.addCountriesMaker(); //标记名字
await this.addCountriesMaker(); //标记名字
}
},
async getAddress(Type) {
this.loading = true;
......@@ -319,19 +348,20 @@ export default {
this.loading = false;
if (Type == 1) {
this.NationList = res.data.data;
this.NationList.forEach(x=>{
x.ID = Number(x.ID)
})
this.TripMapList.length>0&&this.TripMapList.forEach(x=>{
x.NationList = res.data.data
})
this.$forceUpdate()
this.NationList.forEach(x => {
x.ID = Number(x.ID);
});
this.TripMapList.length > 0 &&
this.TripMapList.forEach(x => {
x.NationList = res.data.data;
});
this.$forceUpdate();
}
},
err => {}
);
},
alterCity(x,index,type){
alterCity(x, index, type) {
let obj = {
CityList: [],
CityListAll: [],
......@@ -344,23 +374,24 @@ export default {
MName: null,
MType: 1,
MapLevel: 0,
MapUrl:"",
MapUrl: "",
ParentId: null,
PositionStr:{
PositionStr: {
Bottom: 0,
Left: 0,
Right: 0,
Top: 0,
}
Top: 0
}
if(type){
this.TripMapList.push(JSON.parse(JSON.stringify(obj)))
}else{
this.TripMapList.splice(index,1)
};
if (type) {
this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
} else {
this.TripMapList.splice(index, 1);
this.AssemblyData()
}
},
getCityListIds(x,index){
x.CityList = []
getCityListIds(x, index) {
x.CityList = [];
let obj = {
CityList: [],
ColorStr: x.ColorStr,
......@@ -369,37 +400,38 @@ export default {
MId: null,
MName: null,
MType: 2,
MapLevel:0,
MapUrl:"",
MapLevel: 0,
MapUrl: "",
ParentId: x.MId,
PositionStr:{
PositionStr: {
Bottom: 0,
Left: 0,
Right: 0,
Top: 0,
}
Top: 0
}
x.CityListAll.forEach(item=>{
x.CityListIds.forEach(items=>{
if(item.ID==items){
obj.MId = item.ID
obj.MName = item.Name
this.TripMapList[index].CityList.push(JSON.parse(JSON.stringify(obj)))
};
x.CityListAll.forEach(item => {
x.CityListIds.forEach(items => {
if (item.ID == items) {
obj.MId = item.ID;
obj.MName = item.Name;
this.TripMapList[index].CityList.push(
JSON.parse(JSON.stringify(obj))
);
}
})
})
this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList))
this.$forceUpdate()
this.AssemblyData()
});
});
this.dataAll.TripMapList = JSON.parse(JSON.stringify(this.TripMapList));
this.$forceUpdate();
this.AssemblyData();
},
SearchCity(MId,x,index) {
if(x){
x.NationList.forEach(item=>{
if(item.ID==MId){
console.log(x.NationList[0],MId,'-----1111')
this.TripMapList[index].MName = item.Name
SearchCity(MId, x, index) {
if (x) {
x.NationList.forEach(item => {
if (item.ID == MId) {
this.TripMapList[index].MName = item.Name;
}
})
});
}
this.loadingCity = true;
......@@ -411,35 +443,35 @@ export default {
res => {
this.loadingCity = false;
this.CityList = res.data.data;
this.CityList.forEach(x=>{
x.ID = Number(x.ID)
})
this.TripMapList.forEach(item=>{
if(item.MId==MId){
item.CityListIds = []
this.CityList.forEach(x => {
x.ID = Number(x.ID);
});
this.TripMapList.forEach(item => {
if (item.MId == MId) {
item.CityListIds = [];
item.CityListAll = JSON.parse(JSON.stringify(this.CityList));
item.CityList.map(items=>{
item.CityListIds.push(items.MId)
})
item.CityList.map(items => {
item.CityListIds.push(items.MId);
});
}
})
this.$forceUpdate()
});
this.$forceUpdate();
},
err => {}
);
},
addCountryFillRange() {
this.countriesData.forEach((x, i) => {
if(x.MName=='中国'){
x.MName = '中华人民共和国'
if (x.MName == "中国") {
x.MName = "中华人民共和国";
}
this.map.addLayer({
id: "world-layer-" + i,
id: "world-layer-" + x.MId,
type: "fill",
source: "word-source",
filter: ["==", "NAME_ZH", x.MName]
});
this.map.setPaintProperty("world-layer-" + i, "fill-color", [
this.map.setPaintProperty("world-layer-" + x.MId, "fill-color", [
"match",
["get", "NAME_ZH"],
x.MName,
......@@ -465,7 +497,10 @@ export default {
// 10}'><span class='top'></span><span class='right'></span><span class='bottom'></span><span class='left'></span><div>`;
// html = `<div style='position:relative'><div>${item.name}</div>${html}</div>`;
el.innerHTML = item.name;
var marker = new mapboxgl.Marker(el, { offset: [0, -25], draggable: true })
var marker = new mapboxgl.Marker(el, {
offset: [0, -25],
draggable: true
})
.setLngLat([item.longitude, item.latitude])
.addTo(this.map);
this.deviceMarkers.push(marker);
......@@ -502,9 +537,9 @@ export default {
},
createLineHandler() {
let poilines = this.pois.split(",");
poilines.forEach((p, i) => {
this.listCity.forEach((p, i) => {
if (i < poilines.length - 1) {
let x = this.citiesData.find(x => x.name == p);
let x = this.citiesData.find(x => x.name == p.MName);
let y = this.citiesData.find(x => x.name == poilines[i + 1]);
let controlPoint = this.calculateBezierControlPoint(
[x.longitude, x.latitude],
......@@ -523,14 +558,14 @@ export default {
}
]
};
this.map.addSource("curve-source-" + i, {
this.map.addSource("curve-source-" + p.MId, {
type: "geojson",
data: geojson
});
this.map.addLayer({
id: "curve-layer-" + i,
id: "curve-layer-" + p.MId,
type: "line",
source: "curve-source-" + i,
source: "curve-source-" + p.MId,
layout: {
"line-cap": "round",
"line-join": "round"
......@@ -617,7 +652,7 @@ export default {
await Promise.all(
this.countriesData.map(async x => {
let result = await this.getCountryCoordinates(x.MName);
console.log(result);
// console.log(result,'--------');
if (result && result.length == 2) {
let el = document.createElement("div");
el.style.fontSize = "30px";
......@@ -630,6 +665,8 @@ export default {
})
.setLngLat(result)
.addTo(this.map);
const offset = marker.getOffset();
console.log(offset, "----");
}
})
);
......@@ -668,11 +705,16 @@ export default {
padding: 20px;
}
#trip_map {
width: 100%;
height: 500px;
position: absolute;
/* position: fixed; */
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #FFF;
z-index: 5000;
}
body {
......
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