simulation-front/src/views/workManagement/components/pathDialog.vue

<template>
	<el-dialog title="选择轨迹" :visible.sync="open" width="25%" :before-close="onClose" :modal="false"
		:close-on-click-modal="false">
		<el-form ref="form" :model="selectRecord" label-width="100px" size="mini">
			<el-form-item label="选择轨迹">
				<el-select v-model="dataParams.pathId" @change="switchTrack">
					<el-option v-for="item in trackList" :key="item.id" :label="getPathName(item.pathSort)"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="轨迹起点">
				<el-select v-model="dataParams.pathStartJson" value-key="name" @change="switchStartPoint">
					<el-option v-for="(item, index) in selectTrack.startPoints" :key="index" :label="item.name"
						:value="item" :disabled="checkOption(selectTrack.id, item.name, 'start')">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="轨迹终点">
				<el-select v-model="dataParams.pathEndJson" value-key="name" @change="switchEndPoint">
					<el-option v-for="(item, index) in selectTrack.endPoints" :key="index" :label="item.name"
						:value="item" :disabled="checkOption(selectTrack.id, item.name, 'end')">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="车辆朝向">
				<el-input v-model="dataParams.pathStartJson.h" disabled></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="onClose">取 消</el-button>
			<el-button type="primary" @click="onSubmit">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		name: "PathDialog",
		components: {
			// vueQr,
			// glHome,
		},
		data() {
			return {
				selectRecord: {
					pathStartJson: {

					}
				},
				trackList: [],
				selectTrack: {},
				dataParams: {
					pathId: "",
					pathStartJson: {},
					pathEndJson: {}
				},
				preStartPointName: "",
				preEndPointName: ""
			};
		},
		props: {
			open: {
				type: Boolean,
				default: _ => false
			},
			params: {
				type: Object,
				default: _ => {}
			}

		},
		computed: {
			getPathName() {
				return id => "轨迹" + id;
			}
		},
		methods: {
			checkOption(pathId, pointName, type) {
				if (!this.dataParams.selectedPoints[pathId]) {
					return false;
				}

				if (!this.dataParams.selectedPoints[pathId][type]) {
					return false;
				}
				return this.dataParams.selectedPoints[pathId][type].includes(pointName);
			},
			isEmptyJson(obj) {
				return Object.keys(obj).length === 0;
			},
			getMapDetails(mapId) {
				this.$axios({
					method: "post",
					url: this.$api.workManagement.mapDetails,
					data: {
						mapId
					}
				}).then((res) => {
					if (res.code == 200 && res.info) {
						console.log(res.info.path)
						this.trackList = res.info.path;
						this.switchTrack(this.params.pathId);
					}
				})
			},
			switchTrack(id) {
				let isFirst = this.isEmptyJson(this.selectTrack);
				this.trackList.forEach((elem, index) => {
					if (elem.id == id) {
						this.selectTrack = elem;
					}
				});
				if (!isFirst) {
					this.dataParams.pathStartJson = {};
					this.dataParams.pathEndJson = {};
				}
				this.changeMap();

			},
			switchStartPoint(newVal) {
				console.log(this.selectTrack)
				let pointNames = this.dataParams.selectedPoints[this.selectTrack.id]["start"];
				let searchIndex = pointNames.indexOf(this.preStartPointName);
				if (searchIndex != -1) {
					pointNames.splice(searchIndex, 1);
				}
				pointNames.push(newVal.name)
				this.preStartPointName = newVal.name;
				this.changeMap();
			},
			switchEndPoint(newVal) {
				let pointNames = this.dataParams.selectedPoints[this.selectTrack.id]["end"];
				let searchIndex = pointNames.indexOf(this.preEndPointName);
				if (searchIndex != -1) {
					pointNames.splice(searchIndex, 1);
				}
				pointNames.push(newVal.name)
				this.preEndPointName = newVal.name;
				this.changeMap();
			},
			changeMap() {
				let data = Object.assign({}, this.dataParams, {
					sections: this.selectTrack.sections
				})
				data.pathStartJson.type = "start";
				data.pathEndJson.type = "end";
				this.$emit("change", data);
			},
			onClose() {
				this.$emit("onClose");
			},
			onSubmit() {
				this.$emit("onSubmit", Object.assign({}, this.dataParams, {
					sections: this.selectTrack.sections,
					pathSort: this.selectTrack.pathSort
				}));
			}
		},
		watch: {
			params: {
				handler(newVal, oldVal) {
					this.selectTrack = {},
						this.dataParams = JSON.parse(JSON.stringify(newVal));
					this.preStartPointName = this.dataParams.pathStartJson.name;
					this.preEndPointName = this.dataParams.pathEndJson.name;
					this.getMapDetails(newVal.mapId);
				}
			}
		}
	}
</script>

<style>
</style>