草稿地图的导入和导出代码调整

北京一号线站台实训操作代码调整
2020-04-16 14:50:40 +08:00 · 2020-04-16 14:50:40 +08:00 · fc2d9c1ff7
commit fc2d9c1ff7
parent eadcf233b1
6 changed files with 206 additions and 37 deletions
--- a/src/api/jmap/mapdraft.js
+++ b/src/api/jmap/mapdraft.js
@ -116,6 +116,14 @@ export function postBuildMapImport(data) {
    });
 }

+/** 草稿地图数据导出 */
+export function getBuildMapExport(mapId) {
+    return request({
+        url: `/api/mapBuild/${mapId}/export`,
+        method: 'get'
+    });
+}
+
 /** 查询进路列表*/
 export function listRouteRoute(mapId, params) {
    return request({
--- a/src/jmapNew/theme/beijing_01/menus/dialog/standJumpStopControl.vue
+++ b/src/jmapNew/theme/beijing_01/menus/dialog/standJumpStopControl.vue
@ -167,7 +167,13 @@ export default {
            return this.dialogShow ? OperationHandler.getDomIdByOperation(this.operation) : '';
        },
        title() {
-            return '跳停';
+            if (this.operation == OperationEvent.StationStand.setJumpStop.menu.operation) {
+                return '跳停';
+            } else if (this.operation == OperationEvent.StationStand.cancelJumpStop.menu.operation) {
+                return '取消跳停';
+            } else {
+                return '';
+            }
        },
        upstream() {
            return '02'; // 上行
@ -199,7 +205,7 @@ export default {
        doShow(operate, selected) {
            this.selected = selected;
            if (!this.dialogShow) {
-                this.radio1 = '',
+                this.radio1 = '';
                this.standName = '';
                this.stationName = '';
                if (selected) {
--- a/src/jmapNew/theme/beijing_01/operationConfig.js
+++ b/src/jmapNew/theme/beijing_01/operationConfig.js
@ -157,7 +157,7 @@ export default {
            productTypes: ['02'],
            stepVOList: [
                { deviceType: '06', orderNum: 1, operateCode: '509', tip: '鼠标右键菜单选择【停站时间控制】' },
-                { deviceType: '06', orderNum: 2, operateCode: '5092', tip: '鼠标左键点击，选择【人工】', val: '02' },
+                { deviceType: '06', orderNum: 2, operateCode: '5092', tip: '鼠标左键点击，选择【全人工】', val: '02' },
                { deviceType: '06', orderNum: 3, operateCode: '5094', tip: '输入或鼠标点击，调整为【20】', val: '20' },
                { deviceType: '06', orderNum: 4, operateCode: '509', tip: '鼠标左键点击【确认】按钮' }
            ]
@ -173,7 +173,7 @@ export default {
            productTypes: ['02'],
            stepVOList: [
                { deviceType: '06', orderNum: 1, operateCode: '509', tip: '鼠标右键菜单选择【停站时间控制】' },
-                { deviceType: '06', orderNum: 2, operateCode: '5092', tip: '鼠标左键点击，选择【人工】', val: '02' },
+                { deviceType: '06', orderNum: 2, operateCode: '5092', tip: '鼠标左键点击，选择【全人工】', val: '02' },
                { deviceType: '06', orderNum: 3, operateCode: '5094', tip: '输入或鼠标点击，调整为【20】', val: '20' },
                { deviceType: '06', orderNum: 4, operateCode: '5093', tip: '鼠标左键点击，选择【一次有效】', val: 'false' },
                { deviceType: '06', orderNum: 5, operateCode: '509', tip: '鼠标左键点击【确认】按钮' }
--- a/src/views/newMap/newDesignUser/demonList.vue
+++ b/src/views/newMap/newDesignUser/demonList.vue
@ -14,12 +14,14 @@
        </el-tree>
      </div>
      <div class="buttonList">
-        <el-button size="small" type="primary" class="eachButton uploadDemo ">
-          <input ref="files" type="file" class="file_box" accept=".json, application/json" @change="importf">
+        <el-button size="small" type="primary" class="eachButton uploadDemo " @click="importMap">
          {{ $t('map.importMap') }}
+          <!-- <input ref="files" type="file" class="file_box" accept=".json, application/json" @change="importf">
+          {{ $t('map.importMap') }} -->
        </el-button>
        <el-button size="small" type="primary" class="eachButton" @click="createMap">{{ $t('map.newConstruction') }}</el-button>
      </div>
+      <map-import ref="mapImport" />
      <map-operate-menu
        ref="menu"
        :point="point"
@ -33,15 +35,17 @@
 </template>
 <script>
 import { DeviceMenu } from '@/scripts/ConstDic';
-import { postBuildMapImport, listMap } from '@/api/jmap/mapdraft';
+import { listMap } from '@/api/jmap/mapdraft';
 import { UrlConfig } from '@/scripts/ConstDic';
 import { removeSessionStorage } from '@/utils/auth';
 import MapOperateMenu from './mapmanage/operateMenu';
+import MapImport from './mapmanage/mapImport';

 export default {
    name: 'UserMapList',
    components: {
-        MapOperateMenu
+        MapOperateMenu,
+        MapImport
    },
    data() {
        return {
@ -143,34 +147,8 @@ export default {
        jlmap3d() {
            this.$router.push({ path: '/design/jlmap3d/edit', query: { mapid: this.editModel.id } });
        },
-        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.loadInitData();
-                        loading.close();
-                    }).catch(error => {
-                        loading.close();
-                        that.$message.error('导入失败' + error.message);
-                    });
-                    obj.value = '';
-                };
-            });
+        importMap() {
+            this.$refs.mapImport.show();
        }
    }
 };
--- a/src/views/newMap/newDesignUser/mapmanage/mapImport.vue
+++ b/src/views/newMap/newDesignUser/mapmanage/mapImport.vue
@ -0,0 +1,154 @@
+<template>
+  <el-dialog v-dialogDrag title="地图导入" :visible.sync="dialogShow" width="360px" :before-close="handleClose" custom-class="importClass">
+    <div>
+      <div v-show="!formDisplay" class="eachButton uploadDemo">
+        <i class="el-icon-plus avatar-uploader-icon el-icon-other" />
+        <input ref="files" type="file" class="file_box" accept=".json, application/json" @change="importf">
+      </div>
+      <el-form v-show="formDisplay" ref="form" label-position="right" :rules="editRules" :model="editModel" label-width="100px" size="mini" @submit.native.prevent>
+        <el-form-item :label="$t('map.mapName')" prop="name">
+          <el-input v-model="editModel.name" />
+        </el-form-item>
+      </el-form>
+      <div style="margin-left:10px;color:red;font-size:13px;">{{ validateText }}</div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('map.cancel') }}</el-button>
+      <el-button type="primary" :loading="loading" @click="importMap">{{ $t('map.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+//
+import { postBuildMapImport } from '@/api/jmap/mapdraft';
+export default {
+    name: 'MapImport',
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            formDisplay:false,
+            jsonData:null,
+            validateText:'',
+            editModel: {
+                name: ''
+            },
+            editRules: {
+                name: [
+                    { required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    methods: {
+        show() {
+            this.validateText = '';
+            this.dialogShow = true;
+        },
+        close() {
+            this.$refs.form.resetFields();
+            this.formDisplay = false;
+            this.editModel.name = '';
+            this.jsonData = null;
+            this.dialogShow = false;
+            this.validateText = '';
+        },
+        handleClose() {
+            this.close();
+        },
+        importMap() {
+            if (!this.jsonData) {
+                this.validateText = '请选择文件';
+                return false;
+            } else if (!this.editModel.name) {
+                // this.validateText = this.$t('rules.pleaseEnterMapName');
+                return false;
+            }
+            // const loading = this.$loading({
+            //     lock: true,
+            //     text: '正在导入中...',
+            //     spinner: 'el-icon-loading',
+            //     background: 'rgba(0, 0, 0, 0.7)'
+            // });
+            const that = this;
+            that.loading = true;
+            this.jsonData.name = this.editModel.name;
+            postBuildMapImport(this.jsonData).then(res => {
+                // loading.close();
+                that.loading = false;
+                that.$message.success('导入成功！');
+                // that.loadInitData();
+                // loading.close();
+                this.close();
+            }).catch(error => {
+                // loading.close();
+                that.loading = false;
+                this.close();
+                that.$message.error('导入失败' + error.message);
+            });
+        },
+        importf() {
+            const that = this;
+            setTimeout(() => {
+                const obj = this.$refs.files;
+                if (!obj.files) return;
+                const f = obj.files[0];
+                if (f.type != 'application/json') {
+                    this.$message.error('请上传json格式的文件');
+                    return;
+                }
+                const reader = new FileReader();
+                reader.readAsText(f, 'utf-8');
+                reader.onload = function(e) {
+                    const data = e.target.result;
+                    that.formDisplay = true;
+                    const json = JSON.parse(data);
+                    that.jsonData = json;
+                    that.editModel.name = json.name;
+                    obj.value = '';
+                    that.validateText = '';
+                };
+            });
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.eachButton{
+    margin-left:10px;
+    width:100px;
+    height:100px;
+    border:1px #ccc dashed;
+    margin-bottom: 10px;
+}
+.el-icon-other{
+    width: 100%;
+    text-align: center;
+    height: 100%;
+    line-height: 72px;
+    font-size: 16px;
+}
+.uploadDemo {
+    position: relative;
+    overflow: hidden;
+    // float: right;
+    padding: 9px 15px;
+    margin-right: 3px;
+    cursor: pointer;
+    input {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        cursor: pointer;
+    }
+}
+</style>
+<style lang="scss">
+.importClass .el-dialog__body{
+    padding-top:10px;
+    padding-bottom: 10px;
+}
+</style>
--- a/src/views/newMap/newDesignUser/mapmanage/operateMenu.vue
+++ b/src/views/newMap/newDesignUser/mapmanage/operateMenu.vue
@ -19,7 +19,7 @@ import MapSaveAs from './saveAs';
 import MapPublish from './publish';
 import MapPublish3d from './publish3d';
 import { mapGetters } from 'vuex';
-import { saveMap } from '@/api/jmap/mapdraft';
+import { saveMap, getBuildMapExport } from '@/api/jmap/mapdraft';
 import { superAdmin, admin } from '@/router/index_APP_TARGET';

 export default {
@ -101,6 +101,10 @@ export default {
                    {
                        label: this.$t('map.publish'),
                        handler: this.publish
+                    },
+                    {
+                        label: '导出',
+                        handler: this.export
                    }
                ];
            } else {
@ -120,6 +124,10 @@ export default {
                    {
                        label: this.$t('map.deleteObj'),
                        handler: this.deleteObj
+                    },
+                    {
+                        label: '导出',
+                        handler: this.export
                    }
                ];
            }
@ -285,6 +293,21 @@ export default {
                this.doClose();
                this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: item.code });
            }
+        },
+        async export() {
+            const res = await getBuildMapExport(this.editModel.id);
+            const resultData = res.data;
+            if (resultData === false) {
+                return;
+            }
+            const content = new Blob([JSON.stringify(resultData)]);
+            const urlObject = window.URL || window.webkitURL || window;
+            const url = urlObject.createObjectURL(content);
+            const el = document.createElement('a');
+            el.href = url;
+            el.download = `${resultData.name}.json`;
+            el.click();
+            urlObject.revokeObjectURL(url);
        }
    }
 };