425 lines
14 KiB
Vue
425 lines
14 KiB
Vue
<template>
|
|
<transition name="el-zoom-in-center">
|
|
<div class="mapPaint">
|
|
<div class="map-view">
|
|
<div class="operation_box">
|
|
<el-button-group>
|
|
<el-button size="small" :disabled="!stepData.length" @click="revocation">撤销</el-button>
|
|
<el-button size="small" :disabled="!recoverStepData.length" @click="recover">恢复</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
|
|
</div>
|
|
<div class="map-draft">
|
|
<div v-show="viewDraft === 'draft'" class="box">
|
|
<map-operate
|
|
ref="mapOperate"
|
|
:map-info="mapInfo"
|
|
:selected="selected"
|
|
:map-saveing="mapSaveing"
|
|
@handleSelectLogicalView="handleSelectLogicalView"
|
|
@handleSelectPhysicalView="handleSelectPhysicalView"
|
|
@saveMapEvent="saveMapEvent"
|
|
@verifyMapEvent="verifyMapEvent"
|
|
@updateMapModel="updateMapModel"
|
|
@setCenter="setCenter"
|
|
@selectView="selectViewDraft"
|
|
@showMap="showMap"
|
|
/>
|
|
</div>
|
|
<div v-show="viewDraft != 'draft'" class="box">
|
|
<data-relation
|
|
ref="dataRelation"
|
|
: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, postBuildMapImport } 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 { mapGetters } from 'vuex';
|
|
|
|
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: {
|
|
...mapGetters('map', [
|
|
'stepData',
|
|
'recoverStepData'
|
|
])
|
|
},
|
|
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((error) => {
|
|
console.log(error);
|
|
this.$message.error(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);
|
|
this.$store.dispatch('menuOperation/setMapDrawSelectCount');
|
|
}
|
|
},
|
|
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();
|
|
}
|
|
});
|
|
}).catch(error => {
|
|
console.log(error, '错误提示');
|
|
this.mapSaveing = false;
|
|
this.$message(this.$t('tip.saveFailed'));
|
|
});
|
|
}
|
|
}
|
|
},
|
|
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.$message.error(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);
|
|
},
|
|
updateMapModel(models) {
|
|
this.$store.dispatch('map/updateMapDevices', models);
|
|
},
|
|
// 撤销
|
|
revocation() {
|
|
this.$store.dispatch('map/setRevocation');
|
|
},
|
|
// 恢复
|
|
recover() {
|
|
this.$store.dispatch('map/setRecover');
|
|
},
|
|
// 设置显示中心
|
|
setCenter(code) {
|
|
this.$refs.jlmapVisual.setCenter(code);
|
|
},
|
|
createMap() {
|
|
this.$refs.mapCreate.show();
|
|
},
|
|
importf() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在导入中...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
setTimeout(() => {
|
|
const obj = this.$refs.files;
|
|
if (!obj.files) return;
|
|
const f = obj.files[0];
|
|
const reader = new FileReader();
|
|
const that = this;
|
|
reader.readAsText(f, 'utf-8');
|
|
reader.onload = function(e) {
|
|
const data = e.target.result;
|
|
postBuildMapImport(JSON.parse(data)).then(res => {
|
|
loading.close();
|
|
that.$message.success('导入成功！');
|
|
that.refresh();
|
|
loading.close();
|
|
}).catch(error => {
|
|
loading.close();
|
|
that.$message.error('导入失败' + error.message);
|
|
});
|
|
obj.value = '';
|
|
};
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
.operation_box{
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
z-index: 9;
|
|
}
|
|
|
|
.map-draft{
|
|
/deep/{
|
|
.v-modal{
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
.box{
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mapPaint{
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.map-view {
|
|
float: left;
|
|
width: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.map-draft {
|
|
float: right;
|
|
width: 520px;
|
|
height: 100%;
|
|
// /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;
|
|
}
|
|
}
|
|
|
|
.uploadDemo {
|
|
position: relative;
|
|
overflow: hidden;
|
|
float: right;
|
|
padding: 3px 0;
|
|
margin-right: 3px;
|
|
cursor: pointer;
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|