rt-sim-training-client/src/views/map/mapdraft/mapedit/index.vue

<template>
  <transition name="el-zoom-in-center">
    <div class="mapPaint">
      <div class="map-view">
        <jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
      </div>
      <div class="map-draft">
        <div v-show="viewDraft==='draft'">
          <map-operate
            ref="mapOperate"
            :card-height="cardHeight"
            :map-info="mapInfo"
            :selected="selected"
            :map-saveing="mapSaveing"
            @handleSelectLogicalView="handleSelectLogicalView"
            @handleSelectPhysicalView="handleSelectPhysicalView"
            @saveMapEvent="saveMapEvent"
            @verifyMapEvent="verifyMapEvent"
            @addOrUpdateMapModel="addOrUpdateMapModel"
            @delMapModel="delMapModel"
            @setCenter="setCenter"
            @selectView="selectViewDraft"
            @showMap="showMap"
          />
        </div>
        <div v-show="viewDraft != 'draft'">
          <data-relation
            ref="dataRelation"
            :card-height="cardHeight"
            :map-info="mapInfo"
            :selected="selected"
            @selectView="selectViewDraft"
            @showMap="showMap"
          />
        </div>
        <config-map
          ref="configMap"
          @handleSelectView="handleSelectView"
          @handleSelectLogicalView="handleSelectLogicalView"
          @handleSelectPhysicalView="handleSelectPhysicalView"
          @handleSelectHybridView="handleSelectHybridView"
        />
      </div>
    </div>
  </transition>
</template>
<script>
import { saveMap, getMapDetail, verifyMap } from '@/api/jmap/mapdraft';
import { ViewMode, TrainingMode, getDeviceMenuByDeviceType } from '@/scripts/ConstDic';
import { checkLoginLine } from '@/api/login';
import JlmapVisual from '@/views/jlmap/index';
import MapOperate from './mapoperate/index';
import { EventBus } from '@/scripts/event-bus';

import ConfigMap from './configMap';

import DataRelation from './dataRelation/index';

export default {
	name: 'MapView',
	components: {
		JlmapVisual,
		MapOperate,
		DataRelation,
		ConfigMap
	},
	data() {
		return {
			viewSelect: ViewMode.MIX,
			mapSaveing: false,
			ViewMode: ViewMode,
			viewDraft: 'draft',
			autoSaveTask: null,
			selected: null,
			mapInfo: { name: this.$t('map.pleaseSelectMap') },
			timeDemon: null
		};
	},
	computed: {
		cardHeight() {
			return this.$store.state.app.height - 195;
		}
	},
	watch: {
		'$store.state.map.mapDataLoadedCount': function (val) {
			this.initAutoSaveTask();
		},
		$route() {
			this.$nextTick(() => {
				this.loadInitPage();
			});
		}
	},
	mounted() {
		this.loadInitPage();
		this.timeDemon = setInterval(() => {
			checkLoginLine();
		}, 5000 * 60);
	},
	beforeDestroy() {
		this.clearAutoSave();
		this.$store.dispatch('map/mapClear');
		if (this.timeDemon) {
			clearTimeout(this.timeDemon);
		}
	},
	methods: {
		endViewLoading(isSuccess) {
			if (!isSuccess) {
				this.$store.dispatch('map/mapClear');
			}

			this.$nextTick(() => {
				EventBus.$emit('viewLoading', false);
			});
		},
		showMap() {
			this.$refs.configMap.doShow();
		},
		selectViewDraft(data) {
			this.viewDraft = data;
		},
		loadInitPage() {
			this.$store.dispatch('training/changeMode', { mode: TrainingMode.MAP_EDIT });
			this.mapInfo = { name: this.$t('map.pleaseSelectMap'), id: this.$route.params.mapId };
			if (parseInt(this.mapInfo.id)) {
				this.mapInfo.name = this.$route.query.name;
				getMapDetail(this.$route.params.mapId).then(response => {
					this.$store.dispatch('map/setMapData', response.data).then(resp => {
						this.$store.dispatch('training/setMapDefaultState');
					});
					this.setDelayUnlockStatus(response.data, '00');
					this.initAutoSaveTask();
				}).catch(() => {
					this.$messageBox(this.$t('tip.failedLoadMap'));
					this.endViewLoading();
				});
			} else {
				this.endViewLoading();
			}
		},
		initAutoSaveTask() {
			const timeout = 1000 * 60 * 3;
			this.clearAutoSave(this.autoSaveTask);
			if (this.viewDraft == 'draft') {
				this.autoSaveTask = setInterval(this.saveMapEvent, timeout);
			}
		},
		clearAutoSave() {
			if (this.autoSaveTask) {
				clearInterval(this.autoSaveTask);
				this.autoSaveTask = null;
			}
		},
		handleSelectControlPage (model) {
			if (this.$refs && this.$refs.mapOperate) {
				this.$refs.mapOperate.handleSelectControlPage(model);
			}
		},
		handleSelectView(handle) {
			if (this.$refs && this.$refs.jlmapVisual) {
				this.$refs.jlmapVisual.setLayerVisible(handle);
			}
		},
		handleSelectLogicalView(handle) {
			if (this.$refs && this.$refs.jlmapVisual) {
				this.$refs.jlmapVisual.setLevelVisible(handle);
			}
		},
		handleSelectPhysicalView(handle) {
			if (this.$refs && this.$refs.jlmapVisual) {
				this.$refs.jlmapVisual.setLevelVisible(handle);
			}
		},
		handleSelectHybridView(handle) {
			if (this.$refs && this.$refs.jlmapVisual) {
				this.$refs.jlmapVisual.setLevelVisible(handle);
			}
		},
		clickEvent(em) {
			var device = this.getDeviceByEm(em);
			this.onSelect(device);
			if (this.$refs.dataRelation) {
				this.$refs.dataRelation.setSelected(device);
			}
		},
		// 获取设备数据
		getDeviceByEm(em) {
			var	device = this.$store.getters['map/getDeviceByCode'](em.deviceCode) || null;
			if (device) {
				device._viewVal = em.val;
			}
			return device;
		},
		onSelect(device) {
			this.selected = device || null;
			this.selected && this.handleSelectControlPage(device);
		},
		onContextmenu(em) {
			this.point = {
				x: em.clientX,
				y: em.clientY
			};
			if (!em.deviceType) {
				var menu = getDeviceMenuByDeviceType('Cancel');
				this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
			}
		},
		saveMapEvent() {
			if (this.$refs.jlmapVisual) {
				const map = this.$store.state.map.map;
				if (map && parseInt(this.$route.params.mapId)) {
					for (const i in map.sectionList) {
						if (map.sectionList[i].points.length > 0) {
							for (let index = 0; index < map.sectionList[i].points.length; index++) {
								if (String(map.sectionList[i].points[index].x) == 'undefined' || String(map.sectionList[i].points[index].y) == 'undefined') {
									this.$messageBox(this.$t('tip.sectionPointsDeficiency'));
									return;
								}
							}
						} else {
							this.$messageBox(this.$t('tip.sectionPointsDeficiency'));
							return;
						}
					}

					this.mapSaveing = true;
					this.$store.dispatch('map/saveMapDeviceDefaultRelations').then(() => {
						saveMap(Object.assign(map, { mapId: this.$route.params.mapId })).then(response => {
							this.$message.success(this.$t('tip.saveSuccessfully'));
							this.mapSaveing = false;
							this.initAutoSaveTask();
						}).catch(error => {
							console.log(error);
							this.$messageBox(this.$t('tip.saveFailed'));
							this.mapSaveing = false;
							if (error.code === 40004 || error.code === 40005 || error.code === 40003) {
								this.clearAutoSave();
							} else {
								this.initAutoSaveTask();
							}
						});
					});
				}
			}
		},
		verifyMapEvent() {
			if (this.$refs.jlmapVisual) {
				const map = this.$store.state.map.map;
				if (map && this.$route.params.mapId) {
					verifyMap(this.$route.params.mapId).then(res => {
						if (res.data.length) {
							this.tableToExcel(res.data);
							this.$messageBox(this.$t('tip.dataValidationFailed'));
						} else {
							this.$message.success(this.$t('tip.dataValidationSuccess'));
						}
					}).catch(() => {
						this.$messageBox(this.$t('tip.requestFailed'));
					});
				}
			}
		},

		tableToExcel(data) {
			const filterVal = ['index'];
			const arr = [];
			data.forEach(item => {
				arr.push({ index: item });
			});
			const dataList = this.formatJson(filterVal, arr);
			import('@/utils/Export2Excel').then(excel => {
				excel.export_json_to_excel([this.$t('tip.dataQuestion')], dataList, this.$t('tip.dataList'));
			});
		},
		formatJson(filterVal, jsonData) {
			return jsonData.map(v => filterVal.map(j => v[j]));
		},

		setDelayUnlockStatus(data, status) {
			if (data && data.delayShowList) {
				data.delayShowList.forEach(elem => {
					elem.status = status;
				});
			}
		},
		// 增加数据数据 给vuex map对象中
		addOrUpdateMapModel(obj) {
			this.$store.dispatch('map/updateMapDevices', obj);
		},
		// 删除数据 同时del map
		delMapModel(obj) {
			this.$store.dispatch('map/deleteMapDevices', obj).then(() => {
				this.selected = null;
			});
		},
		// 设置显示中心
		setCenter(code) {
			this.$refs.jlmapVisual.setCenter(code);
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

	.map-draft{
		/deep/{
			.v-modal{
				opacity: 0;
			}
		}
	}

	.mapPaint{
		height: 100%;
		overflow: hidden;
	}

    .map-view {
        float: left;
        width: auto;
    }

    .map-draft {
        float: right;
        width: 520px;

        // /deep/ .el-scrollbar__view {
            // width: 510px !important;
			// height: calc(100% - 40px);
        // }
    }

    .physical-view {
        line-height: 25px;
        height: 60px;
        padding-left: 12px;

        .el-checkbox {
            width: 70px;
            margin: 0;
            margin-right: 12px;
        }
    }
</style>