Skip to content

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

页面修改

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