Skip to content

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

页面修改

parent b580d86c
Show whitespace changes
Inline Side-by-side
Showing with 161 additions and 239 deletions
src/components/newTravelmanager/TravelGroupControl/TravelManagerThree.vue
View file @ 0643d707
......@@ -215,7 +215,7 @@
WCityId: 0, //城市编号
TripColor: "", //行程特色主色
TripCountryList: [], //行程国家
TripCitwlist: [], //行程城市
TripCityList: [], //行程城市
TripMapList: [],
},
//行程
......@@ -421,6 +421,8 @@
basicData.TeamType = this.PostConfig.TeamType;
basicData.TripMapList = this.PostConfig.TripMapList;
basicData.TripCountryList=this.PostConfig.TripCountryList;
basicData.TripCityList=this.PostConfig.TripCityList;
basicData.StartCityId = 0;
basicData.ReturnArriveCityId = 0;
if (this.PostDaysTrip) {
......@@ -452,9 +454,6 @@
basicData.WCountryId = this.PostConfig.WCountryId;
basicData.WLocationId = this.PostConfig.WLocationId;
basicData.WCityId = this.PostConfig.WCityId;
basicData.TripCountryList = this.PostDaysTrip.TripCountryList;
basicData.TripCitwlist = this.PostDaysTrip.TripCitwlist;
this.journeyList.IsUpdateTrip = this.PostDaysTrip.IsUpdateTrip;
//行程特色数据
var TripFeature = {};
......@@ -877,7 +876,7 @@
this.PostConfig.WLocationId = tempData.WLocationId;
this.PostConfig.WCityId = tempData.WCityId;
this.PostConfig.TripCountryList = tempData.TripCountryList;
this.PostConfig.TripCitwlist = tempData.TripCitwlist;
this.PostConfig.TripCityList = tempData.TripCityList;
this.PostConfig.TripMapList = tempData.TripMapList;
this.PostConfig.MapUrl = tempData.MapUrl;
let arrList = function (list) {
......
src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/index.vue
View file @ 0643d707
......@@ -65,15 +65,15 @@
return {
canEdit: true,
pageList: [{
pageTitle: '首页',
pageType: 2,
pageTitle: '介绍',
pageType: 1,
pageTemplate: 0,
isDeletePage: true,
dataObj: {},
},
{
pageTitle: '介绍',
pageType: 1,
pageTitle: '首页',
pageType: 2,
pageTemplate: 0,
isDeletePage: true,
dataObj: {},
......
src/components/newTravelmanager/TravelGroupControl/tripmap.vue
View file @ 0643d707
......@@ -3,26 +3,16 @@
<div class="tripmap-Search">
<div style="display: flex;align-items: start; justify-content: space-between;">
<div style="display: flex;flex-wrap: wrap; flex-grow: 1;">
<div v-for="(x, index) in TripMapList" :key="index" class="row-aic">
<el-select class="w100" size="mini" placeholder="选择国家" v-model="x.MId" @change="SearchCity(x.MId, x, index)"
filterable>
<el-option v-for="(item, i) in x.CountrySelectList" :label="item.Name" :value="item.ID" :key="i">
<el-select class="w100" size="mini" placeholder="选择国家" v-model="chooseCountry"
@change="chagneCountry(),SearchCity()" filterable multiple="">
<el-option v-for="(item, i) in SourceCountryList" :label="item.Name" :value="item.ID" :key="i">
</el-option>
</el-select>
<el-select style="min-width: 300px;max-width: 600px;margin-left: 5px;margin-right: 5px;" size="mini"
placeholder="选择城市" v-model="x.CityChooseList" multiple filterable @change="changeCityListIds(x, index)">
<el-option v-for="(item, i) in x.CitySelectList" :label="item.Name" :value="item.ID" :key="i">
placeholder="选择城市" v-model="chooseCity" multiple filterable @change="changeCity()">
<el-option v-for="(item, i) in SourceCityList" :label="item.Name" :value="item.ID" :key="i">
</el-option>
</el-select>
<el-color-picker v-if="x.MId!=651&&x.MId!=891" style="vertical-align: middle;" v-model="x.ColorStr">
</el-color-picker>
<div style="margin-left: 5px; font-size: 23px;cursor: pointer;">
<i v-if="TripMapList.length - 1 == index" class="el-icon-circle-plus" style="color: #E95252;"
@click="operateCountry(x, index, 1)"></i>
<i v-if="index != 0" class="el-icon-delete-solid" style="color: gray;"
@click="operateCountry(x, index, 0)"></i>
</div>
</div>
</div>
<div class="row-aic" style="flex-shrink: 0;">
<el-button type="danger" key="BtnClose" @click="CloseMapBox">关闭</el-button>
......@@ -45,6 +35,7 @@
mapboxgl.accessToken =
"pk.eyJ1IjoiYWxleDkwMTIiLCJhIjoiY2xtOGw4NHdkMGFndTNjcnFkeWZncGc2dyJ9.lVrAdPHE0Dg5zoWFidfj4Q";
import html2Canvas from "html2canvas";
import { continueRobotMsg } from '../../../store/actions/msgs';
export default {
props: ["PostConfig"],
data() {
......@@ -54,7 +45,7 @@
SourceCountryList: [], //所有国家列表
SourceCityList: [], //国家下面的城市列表
map: null, //地图对象
TripMapList: [], //地图数据
paintRbBgObj: {
//设置属性
"fill-color": {
......@@ -104,23 +95,37 @@
deviceMarkers: [], //城市Markers
allMapCityList: [], //地图显示所有城市
countriesMarkers: [], //国家的Markers
chooseCountry: [], //选中的国家
chooseCity: [], //选中的城市
};
},
watch: {
PostConfig: {
handler(val, oldVal) {
if (val.TripMapList.length > 0) {
this.TripMapList = JSON.parse(JSON.stringify(val.TripMapList));
if (val.TripCountryList.length > 0 || val.TripCitylist.length > 0) {
this.chooseCountry = [];
if (val.TripCountryList && val.TripCountryList.length > 0) {
val.TripCountryList.forEach(cItem => {
let tempCountryIndex = this.chooseCountry.findIndex(y => y == cItem.MId)
if (tempCountryIndex == -1) {
//添加选中国家
this.chooseCountry.push(cItem.MId);
};
});
this.SearchCity();
}
this.chooseCity = [];
if (val.TripCityList && val.TripCityList.length > 0) {
val.TripCityList.forEach(cItem => {
let tempCountryIndex = this.chooseCity.findIndex(y => y == cItem.MId)
if (tempCountryIndex == -1) {
//添加选中城市
this.chooseCity.push(cItem.MId);
};
});
}
this.getMapData();
} else {
this.TripMapList = [];
let obj = this.getDataObj();
obj.CitySelectList = [];
obj.CityChooseList = [4, 6];
obj.CountrySelectList = [];
obj.MId = 2;
obj.MName = "中国";
this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
}
},
deep: true,
......@@ -143,6 +148,7 @@
this.setPaintRbBgList()
},
mounted() {
this.getCountryList();
this.initMap();
},
methods: {
......@@ -171,83 +177,13 @@
this.getMapData();
});
},
//获取地图数据
async getMapData() {
this.countriesData = [];
this.citiesData = [];
await this.assemblingMapData();
if (this.countriesData && this.countriesData.length > 0 && this.citiesData && this.citiesData.length > 0) {
this.ClearSource();
this.allMapCityList = [];
this.TripMapList.forEach(countryItem => {
//加载国家下拉列表
if (!(countryItem.CountrySelectList) || (countryItem.CountrySelectList && countryItem.CountrySelectList
.length <= 0)) {
this.getCountryList();
}
//加载城市下拉列表
if (countryItem.MId && (!(countryItem.CitySelectList) || (countryItem.CitySelectList && countryItem
.CitySelectList.length <=
0))) {
this.SearchCity(countryItem.MId);
}
})
this.TripMapList.forEach(countryItem => {
let countryObj = {
Id: countryItem.Id,
MName: countryItem.MName,
name: countryItem.MName,
MId: countryItem.MId,
ColorStr: countryItem.ColorStr,
Lng: countryItem.Lng,
Lat: countryItem.Lat,
CitySelectList: countryItem.CitySelectList
};
//判断是否存在国家
let tempCountryIndex = this.countriesData.findIndex(y => y.MName == countryItem.MName)
if (tempCountryIndex == -1) {
//添加国家
this.countriesData.push(countryObj);
};
//添加城市
countryItem.CityList.forEach(cityItem => {
var cityObj = {
Id: cityItem.Id,
MName: cityItem.MName,
name: cityItem.MName,
MId: cityItem.MId,
PMName: countryItem.MName,
ColorStr: cityItem.ColorStr,
Lng: cityItem.Lng,
Lat: cityItem.Lat,
CitySelectList: countryItem.CitySelectList,
longitude: cityItem.Lng,
latitude: cityItem.Lat,
ParentId: countryItem.MId
}
if (cityObj.Id > 0 && cityItem.Lng && cityItem.Lat) {
cityObj.Lng = Number(cityItem.Lng);
cityObj.Lat = Number(cityItem.Lat);
cityObj.latitude = Number(cityItem.Lat);
cityObj.longitude = Number(cityItem.Lng);
} else {
//使用系统中的经纬度
var tempCity = countryItem.CitySelectList.find((cItem) => {
return cItem.ID === cityObj.MId;
});
if (tempCity && tempCity.Lng && tempCity.Lat) {
cityObj.Lng = Number(tempCity.Lng);
cityObj.Lat = Number(tempCity.Lat);
cityObj.latitude = Number(tempCity.Lat);
cityObj.longitude = Number(tempCity.Lng);
}
}
//判断城市是否存在
let tempCityIndex = this.citiesData.findIndex(y => y.MName == cityItem.MName)
if (tempCityIndex == -1) {
this.citiesData.push(cityObj); //添加城市
};
});
});
//填充国家颜色
this.addCountryFillRange();
// 获取城市坐标信息
......@@ -256,7 +192,6 @@
this.clearCountriesMaker();
//遍历有经纬度的城市
var tempData = [];
var that = this;
this.citiesData.forEach(cItem => {
if (cItem.longitude && cItem.latitude) {
tempData.push(cItem);
......@@ -265,20 +200,11 @@
MName: cItem.MName,
MId: cItem.MId
});
that.TripMapList.forEach(countryItem => {
if (countryItem.CityList && countryItem.CityList.length > 0) {
countryItem.CityList.forEach(subItem => {
if (subItem.MId == cItem.MId) {
subItem.Lat = cItem.latitude;
subItem.Lng = cItem.longitude;
}
})
}
});
}
})
this.citiesData = tempData;
console.log("citiesData_2", this.citiesData);
if (this.citiesData && this.citiesData.length > 0) {
// 可见范围
const bounds = new mapboxgl.LngLatBounds();
this.citiesData.forEach(city => {
......@@ -287,12 +213,74 @@
this.map.fitBounds(bounds, {
padding: 150, // 可选：在地图边界周围添加一些内边距
});
}
if (this.countriesData && this.countriesData.length > 0 && this.countriesData.length == 1) {
this.map.setCenter(bounds.getCenter());
}
this.addMarker(); //标记
this.createLineHandler();
await this.addCountriesMaker(); //标记国家
}
},
//组装数据
async assemblingMapData() {
this.countriesData = [];
if (this.chooseCountry && this.chooseCountry.length > 0 && this.SourceCountryList && this.SourceCountryList
.length > 0) {
this.chooseCountry.forEach(countryItem => {
var tempCountry = this.SourceCountryList.find((cItem) => {
return cItem.ID === countryItem;
});
if (tempCountry && tempCountry.ID > 0) {
let countryObj = {
Id: 0,
MName: tempCountry.Name,
name: tempCountry.Name,
MId: tempCountry.ID,
ColorStr: this.PostConfig.TripColor ? this.PostConfig.TripColor : "#409eff",
Lng: tempCountry.Lng,
Lat: tempCountry.Lat,
longitude: tempCountry.Lng,
latitude: tempCountry.Lat,
MType:1,
};
//判断是否存在国家
let tempCountryIndex = this.countriesData.findIndex(y => y.MName == countryObj.MName)
if (tempCountryIndex == -1) {
//添加国家
this.countriesData.push(countryObj);
};
}
});
}
this.citiesData = [];
if (this.chooseCity && this.chooseCity.length > 0 && this.SourceCityList && this.SourceCityList.length > 0) {
this.chooseCity.forEach(qcity => {
var tempCity = this.SourceCityList.find((cItem) => {
return cItem.ID === qcity;
});
var cityObj = {
Id: 0,
MName: tempCity.Name,
name: tempCity.Name,
MId: tempCity.ID,
PMName: tempCity.CountryName,
ColorStr: this.PostConfig.TripColor ? this.PostConfig.TripColor : "#409eff",
Lng: tempCity.Lng,
Lat: tempCity.Lat,
longitude: tempCity.Lng,
latitude: tempCity.Lat,
ParentId: tempCity.CountryId,
MType:2,
}
//判断城市是否存在
let tempCityIndex = this.citiesData.findIndex(y => y.MName == cityObj.MName)
if (tempCityIndex == -1) {
this.citiesData.push(cityObj); //添加城市
};
})
}
},
addMarker() {
this.citiesData.forEach((item, i) => {
......@@ -525,14 +513,8 @@
marker.setLngLat(result);
marker.addTo(this.map);
let currentMarkerLngLat = marker.getLngLat();
let TripMapList = that.TripMapList.filter(y => y.MName == x.MName)
TripMapList[0].Lng = currentMarkerLngLat.lng;
TripMapList[0].Lat = currentMarkerLngLat.lat;
marker.on("dragend", function () {
currentMarkerLngLat = marker.getLngLat();
TripMapList = that.TripMapList.filter(y => y.MName == x.MName)
TripMapList[0].Lng = currentMarkerLngLat.lng;
TripMapList[0].Lat = currentMarkerLngLat.lat;
});
this.countriesMarkers.push(marker);
}
......@@ -625,6 +607,7 @@
CityList: [], //保存国家下面的城市列表
CitySelectList: [], //国家下面的城市下拉列表
CityChooseList: [], //选中的城市Id
ChooseCountryList: [], //选中的国家Id
CountrySelectList: [], //国家下拉列表
ColorStr: this.PostConfig.TripColor ? this.PostConfig.TripColor : "#409eff",
ConfigId: this.PostConfig.ID,
......@@ -646,27 +629,8 @@
};
return obj;
},
//添加、删除国家（type=1,新增，0-删除）
operateCountry(x, index, type) {
let obj = this.getDataObj();
obj.MId = "";
if (type) {
this.TripMapList.push(JSON.parse(JSON.stringify(obj)));
} else {
var currentCountry = this.countriesData[index];
if (currentCountry) {
let MId = currentCountry.MId;
this.ClearSource('curve-layer-' + MId, 1)
this.ClearSource('curve-source-' + MId, 2)
this.ClearSource('world-layer-' + MId, 1)
}
this.TripMapList.splice(index, 1);
}
this.getMapData();
},
//获取所有国家
getCountryList() {
if (this.SourceCountryList && this.SourceCountryList.length == 0) {
var countryMsg = {
CodeLevel: 1,
}
......@@ -675,49 +639,22 @@
countryMsg,
res => {
this.SourceCountryList = res.data.data;
if (this.TripMapList && this.TripMapList.length > 0) {
this.TripMapList.forEach(x => {
x.CountrySelectList = res.data.data;
});
}
},
);
} else {
if (this.TripMapList && this.TripMapList.length > 0) {
this.TripMapList.forEach(x => {
x.CountrySelectList = this.SourceCountryList;
});
}
}
},
//选择城市或移除城市
changeCityListIds(x, index) {
x.CityList = [];
let obj = {};
obj = this.getDataObj();
obj.ParentId = x.MId;
obj.MType = 2;
x.CityChooseList.forEach(items => {
x.CitySelectList.forEach(item => {
if (item.ID == items) {
obj.MId = item.ID;
obj.MName = item.Name;
this.TripMapList[index].CityList.push(
JSON.parse(JSON.stringify(obj))
);
}
});
});
//国家选这改变
chagneCountry() {
this.getMapData();
},
//城市切换
changeCity() {
this.getMapData();
},
//查询国家下面的城市
SearchCity(MId, x, index) {
if (x) {
x.CountrySelectList.forEach(item => {
if (item.ID == MId) {
this.TripMapList[index].MName = item.Name;
}
});
SearchCity() {
var MId = "";
if (this.chooseCountry) {
MId = this.chooseCountry.join(",");
}
this.apipost(
"dict_get_Destination_GetCountryCityList", {
......@@ -725,21 +662,6 @@
},
res => {
this.SourceCityList = res.data.data;
this.TripMapList.forEach(item => {
if (item.MId == MId) {
item.CityChooseList = [];
item.CitySelectList = JSON.parse(JSON.stringify(this.SourceCityList));
item.CityList.map(items => {
item.CityChooseList.push(items.MId);
});
item.CitySelectList.forEach(x => {
let obj = [
["==", ["get", "name"], x.MName], this.getRandomColor(),
]
})
}
});
}
);
},
......@@ -771,7 +693,8 @@
let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
that.PostConfig.Mapurl = allPath;
//调用父页面保存方法
that.PostConfig.TripMapList = JSON.parse(JSON.stringify(that.TripMapList));
that.PostConfig.TripCountryList = JSON.parse(JSON.stringify(that.countriesData));
that.PostConfig.TripCityList = JSON.parse(JSON.stringify(that.citiesData));
that.$emit('saveMsg');
} else {
that.saveLoading = false;
......
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