rt-sim-training-client/src/views/display/tipScriptRecord.vue

<template>
  <div class="reminder-drag">
    <div ref="drapBox" class="reminder-box">
      <div class="tip-title">
        <i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
        <i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
        <p v-if="isShrink" style="color: #fff;">
          <span>{{ title }}</span>
        </p>
      </div>
      <div ref="dragBody" class="tip-body-box">
        <div class="tip-body">
          <template v-if="displayType=='role'">
            <role-condition-script :group="group" @getBehaviorList="getBehaviorList" />
          </template>
          <template v-if="displayType=='behavior'">
            <div class="tab-pane-big">
              <el-scrollbar ref="elScrollbar" wrap-class="scrollbar-wrapper">
                <get-behavior ref="getBehavior" :group="group" :member-id="memberId" @backToMember="backToMember" @getActions="getActions" @backToTop="backToTop" />
              </el-scrollbar>
            </div>
          </template>
          <template v-if="displayType=='action'">
            <div class="tab-pane-big">
              <el-scrollbar ref="elActionScrollbar" wrap-class="scrollbar-wrapper">
                <get-action ref="getAction" :group="group" :member-id="memberId" :behavior-id="behaviorId" @backToBehavior="backToBehavior" @backToTop="backToActionTop" />
              </el-scrollbar>
            </div>
          </template>
          <el-button-group class="button-group">
            <el-button type="primary" @click="saveMaplocation">更新定位</el-button>
            <el-button type="primary" @click="saveScenesStage">保存背景</el-button>
            <el-button type="success" @click="saveScenesData">保存数据</el-button>
            <!-- <el-button type="danger" @click="dumpScenesData">重置剧本</el-button> -->
          </el-button-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import GetBehavior from './scriptRecord/getBehavior';
import GetAction from './scriptRecord/getAction';
import RoleConditionScript from './scriptRecord/roleConditionScript';
import {saveScriptScenes, saveScriptData, dumpScriptData} from '@/api/simulation';

export default {
	name: 'TipScriptRecord',
	components: {
		GetBehavior,
		GetAction,
		RoleConditionScript
	},
	props: {
		group: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			title: '任务录制',
			isShrink: false,
			memberId: null,
			behaviorId: null,
			displayType: 'role',
			mapLocation: {}
			// isSaveStage: true,
		};
	},
	watch: {
		'$store.state.map.mapViewLoadedCount': function (val) {
			// debugger;
			//
			// this.$parent.$parent.$refs['mapCanvas'].$refs['mapCommon'].$refs['jlmapVisual'].$jlmap.setOptions({type: 'zoom', scale:this.mapLocation.scale});
		}
	},
	created() {
	},
	mounted() {
		this.shrink();
	},
	methods: {
		jump(obj) {
		},
		shrink() {
			const height = this.$refs.dragBody.offsetHeight + 40;
			const top = this.$refs.drapBox.style.top;
			if (this.isShrink) {
				this.$refs.drapBox.style.height = '40px';
				this.$refs.drapBox.style.top = '';
				this.isShrink = false;
			} else {
				this.$refs.drapBox.style.height = height + 'px';
				this.$refs.drapBox.style.top = top;
				this.isShrink = true;
			}
		},
		backToMember() {
			this.displayType='role';
		},
		backToBehavior() {
			this.displayType='behavior';
		},
		getActions(row) {
			this.displayType='action';
			this.behaviorId=row.id;
			this.$store.dispatch('scriptRecord/updateBehaviorName', row.description);
		},
		saveScenesStage() {
			saveScriptScenes(this.group).then(resp => {
				// this.isSaveStage = false;
				this.$message.success('保存背景成功');
			}).catch(() => {
				this.$messageBox('保存背景失败!');
			});
		},
		saveScenesData() {
			saveScriptData(this.group).then(resp => {
				this.$message.success('保存数据成功');
			}).catch(() => {
				this.$messageBox('保存数据失败!');
			});
		},
		dumpScenesData() {
			this.$confirm('此操作将会清除已保存的录制数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				dumpScriptData(this.scriptId).then(resp => {
					// this.isSaveStage = true;
					this.$message.success('清除数据成功');
				}).catch(() => {
					this.$messageBox('清除数据失败!');
				});
			});
		},
		getBehaviorList(id) {
			this.displayType='behavior';
			this.memberId=id;
		},
		backToTop() {
			var div = this.$refs['elScrollbar'].$refs['wrap'];
			div.scrollTop=0;
		},
		backToActionTop() {
			var div = this.$refs['elActionScrollbar'].$refs['wrap'];
			div.scrollTop=0;
		},
		saveMaplocation() {
			// this.$parent.$parent.$refs['mapCanvas'].$refs['mapCommon'].$refs['jlmapVisual'].$jlmap.$options
			// let dataZoom = this.$store.state.map.dataZoom;
			// let scriptId=this.$route.query.scriptId;
			// let data={scale:dataZoom.scaleRate,x:dataZoom.offsetX,y:dataZoom.offsetY};
			// updateMapLocation(scriptId,data).then(response=>{
			//     this.$message.success('更新定位成功');
			// }).catch(error => {
			//     this.$messageBox(`更新定位失败: ${error.message}`);
			// });
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .tip-body-box {
        position: relative;
        // height: 540px;
    }
    .tab-pane-big{
        height:420px;
    }
    .breadColor{
        color:#fff;
    }

    .reminder-box {
        position: absolute;
        float: left;
        left: 15px;
        bottom: 15px;
        width: 995px;
        height: 540px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        z-index: 10;
        font-size: 18px;

        .tip-title {
            width: 100%;
            overflow: hidden;
            height: 40px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            background-color: #409EFF;
            border-radius: 5px 5px 0 0;
            justify-content: space-between;
            padding: 0 10px;
        }

        .tip-body {
            height: 500px;
            padding: 10px;

            .list-label {
                width: 105px;
            }
            .button-group{
                margin-top:15px;
                margin-left: 20px;
                float:right;
            }

        }

        .icon {
            float: right;
            margin-right: 10px;
            cursor: pointer;
            background-color: #f3f3f3;
            border-radius: 50%;
        }

        /deep/ {
            .el-tree-node__content {
                margin-bottom: 4px;
            }

            .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                background-color: #d6e5f7;
            }
        }
    }
</style>