310 lines
12 KiB
Vue
310 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div class="reminder-drag">
|
||
|
|
<div class="reminder-box" ref="drapBox">
|
||
|
|
<div class="tip-title">
|
||
|
|
<i class="icon el-icon-minus" @click="shrink" v-show="isShrink"></i>
|
||
|
|
<i class="icon el-icon-plus" @click="shrink" v-show="!isShrink"></i>
|
||
|
|
<p style="color: #fff;" v-if="isShrink">
|
||
|
|
<span>{{ title }}</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="tip-body-box" ref="dragBody">
|
||
|
|
<div class="tip-body">
|
||
|
|
<!-- <el-scrollbar wrapClass="scrollbar-wrapper"> -->
|
||
|
|
<template v-if="isRoleSectionDisplay">
|
||
|
|
<template>
|
||
|
|
<el-tabs v-model="activeName" type="card">
|
||
|
|
<el-tab-pane label="用户角色" name="first">
|
||
|
|
<div class="tab-pane">
|
||
|
|
<el-scrollbar wrapClass="scrollbar-wrapper">
|
||
|
|
<role-section ref="roleSection" :group="group" @addBehavior="addBehavior" @getBehaviorList="getBehaviorList"></role-section>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="目标条件" name="second">
|
||
|
|
<div class="tab-pane">
|
||
|
|
<el-scrollbar wrapClass="scrollbar-wrapper">
|
||
|
|
<target-condition ref="targetCondition" :group="group"></target-condition>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
<template v-if="isBehaviorSectionDisplay">
|
||
|
|
<div class="tab-pane-big">
|
||
|
|
<el-scrollbar wrapClass="scrollbar-wrapper">
|
||
|
|
<add-behavior ref="addBehavior" :group="group" :memberId="memberId" @addBehaviorSuccess="addBehaviorSuccess" @backToMember="backToMember"></add-behavior>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template v-if="isBehaviorListDisplay">
|
||
|
|
<div class="tab-pane-big">
|
||
|
|
<el-scrollbar wrapClass="scrollbar-wrapper">
|
||
|
|
<get-behavior ref="getBehavior" :group="group" :memberId="memberId" @backToMember="backToMember" @addAction="addAction" @getActions="getActions"></get-behavior>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template v-if="isActionAddDisplay">
|
||
|
|
<div class="tab-pane-big">
|
||
|
|
<el-scrollbar wrapClass="scrollbar-wrapper">
|
||
|
|
<add-action ref="addAction" :group="group" :memberId="memberId" :behaviorId="behaviorId" @addActionSuccess="addActionSuccess" @backToBehavior="backToBehavior"></add-action>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template v-if="isActionListDisplay">
|
||
|
|
<div class="tab-pane-big">
|
||
|
|
<el-scrollbar wrapClass="scrollbar-wrapper">
|
||
|
|
<get-action ref="getAction" :group="group" :memberId="memberId" :behaviorId="behaviorId" @backToBehavior="backToBehavior"></get-action>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<el-button-group class="button-group">
|
||
|
|
<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>
|
||
|
|
<!-- </el-scrollbar> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import RoleSection from './scriptRecord/roleSection';
|
||
|
|
import AddBehavior from './scriptRecord/addBehavior';
|
||
|
|
import GetBehavior from './scriptRecord/getBehavior';
|
||
|
|
import AddAction from './scriptRecord/addAction';
|
||
|
|
import GetAction from './scriptRecord/getAction';
|
||
|
|
import TargetCondition from './scriptRecord/targetCondition';
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
import { launchFullscreen, exitFullscreen } from '@/utils/screen';
|
||
|
|
import {getMembersByGroup,postMemberBehavior,saveScriptScenes, saveScriptData, dumpScriptData} from '@/api/simulation';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'TipScriptRecord',
|
||
|
|
props: {
|
||
|
|
group: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
RoleSection,
|
||
|
|
AddBehavior,
|
||
|
|
GetBehavior,
|
||
|
|
AddAction,
|
||
|
|
GetAction,
|
||
|
|
TargetCondition
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: '任务录制',
|
||
|
|
isShrink: false,
|
||
|
|
memberId:null,
|
||
|
|
behaviorId:null,
|
||
|
|
isRoleSectionDisplay:true,
|
||
|
|
isBehaviorSectionDisplay:false,
|
||
|
|
isBehaviorListDisplay:false,
|
||
|
|
isActionAddDisplay:false,
|
||
|
|
isActionListDisplay:false,
|
||
|
|
activeName:"first",
|
||
|
|
// isSaveStage: true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.loadInitData(this.$route.query);
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
loadInitData(obj) {
|
||
|
|
this.shrink();
|
||
|
|
},
|
||
|
|
jump(obj) {
|
||
|
|
},
|
||
|
|
shrink() {
|
||
|
|
let height = this.$refs.dragBody.offsetHeight + 40;
|
||
|
|
let 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;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
addBehavior(id){
|
||
|
|
this.isBehaviorSectionDisplay=true;
|
||
|
|
this.isRoleSectionDisplay=false;
|
||
|
|
this.isBehaviorListDisplay=false;
|
||
|
|
this.isActionAddDisplay=false;
|
||
|
|
this.isActionListDisplay=false;
|
||
|
|
this.memberId=id;
|
||
|
|
},
|
||
|
|
getBehaviorList(id){
|
||
|
|
this.isRoleSectionDisplay=false;
|
||
|
|
this.isBehaviorListDisplay=true;
|
||
|
|
this.isBehaviorSectionDisplay=false;
|
||
|
|
this.isActionAddDisplay=false;
|
||
|
|
this.isActionListDisplay=false;
|
||
|
|
this.memberId=id;
|
||
|
|
},
|
||
|
|
addBehaviorSuccess(){
|
||
|
|
this.isRoleSectionDisplay=true;
|
||
|
|
this.isBehaviorListDisplay=false;
|
||
|
|
this.isBehaviorSectionDisplay=false;
|
||
|
|
this.isActionAddDisplay=false;
|
||
|
|
this.isActionListDisplay=false;
|
||
|
|
},
|
||
|
|
backToMember(){
|
||
|
|
this.isRoleSectionDisplay=true;
|
||
|
|
this.isBehaviorListDisplay=false;
|
||
|
|
this.isBehaviorSectionDisplay=false;
|
||
|
|
this.isActionAddDisplay=false;
|
||
|
|
this.isActionListDisplay=false;
|
||
|
|
},
|
||
|
|
backToBehavior(){
|
||
|
|
this.isRoleSectionDisplay=false;
|
||
|
|
this.isBehaviorListDisplay=true;
|
||
|
|
this.isBehaviorSectionDisplay=false;
|
||
|
|
this.isActionAddDisplay=false;
|
||
|
|
this.isActionListDisplay=false;
|
||
|
|
},
|
||
|
|
addActionSuccess(){
|
||
|
|
this.isRoleSectionDisplay=false;
|
||
|
|
this.isBehaviorListDisplay=true;
|
||
|
|
this.isBehaviorSectionDisplay=false;
|
||
|
|
this.isActionAddDisplay=false;
|
||
|
|
this.isActionListDisplay=false;
|
||
|
|
},
|
||
|
|
addAction(id){
|
||
|
|
this.isRoleSectionDisplay=false;
|
||
|
|
this.isBehaviorListDisplay=false;
|
||
|
|
this.isBehaviorSectionDisplay=false;
|
||
|
|
this.isActionAddDisplay=true;
|
||
|
|
this.isActionListDisplay=false;
|
||
|
|
this.behaviorId=id;
|
||
|
|
},
|
||
|
|
getActions(id){
|
||
|
|
this.isRoleSectionDisplay=false;
|
||
|
|
this.isBehaviorListDisplay=false;
|
||
|
|
this.isBehaviorSectionDisplay=false;
|
||
|
|
this.isActionAddDisplay=false;
|
||
|
|
this.isActionListDisplay=true;
|
||
|
|
this.behaviorId=id;
|
||
|
|
},
|
||
|
|
saveScenesStage() {
|
||
|
|
saveScriptScenes(this.group).then(resp => {
|
||
|
|
// this.isSaveStage = false;
|
||
|
|
this.$message.success('保存背景成功');
|
||
|
|
}).catch(error => {
|
||
|
|
this.$messageBox('保存背景失败!');
|
||
|
|
})
|
||
|
|
},
|
||
|
|
saveScenesData() {
|
||
|
|
saveScriptData(this.group).then(resp => {
|
||
|
|
this.$message.success('保存数据成功');
|
||
|
|
}).catch(error => {
|
||
|
|
this.$messageBox('保存数据失败!');
|
||
|
|
})
|
||
|
|
},
|
||
|
|
dumpScenesData() {
|
||
|
|
this.$confirm('此操作将会清除已保存的录制数据, 是否继续?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
dumpScriptData(this.scriptId).then(resp => {
|
||
|
|
// this.isSaveStage = true;
|
||
|
|
this.$message.success('清除数据成功');
|
||
|
|
}).catch(error => {
|
||
|
|
this.$messageBox('清除数据失败!');
|
||
|
|
})
|
||
|
|
}).catch(error => { })
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
|
|
@import "src/styles/mixin.scss";
|
||
|
|
|
||
|
|
.tip-body-box {
|
||
|
|
position: relative;
|
||
|
|
// height: 540px;
|
||
|
|
}
|
||
|
|
.tab-pane{
|
||
|
|
height:360px;
|
||
|
|
}
|
||
|
|
.tab-pane-big{
|
||
|
|
height:420px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.reminder-box {
|
||
|
|
position: absolute;
|
||
|
|
float: left;
|
||
|
|
left: 15px;
|
||
|
|
bottom: 15px;
|
||
|
|
width: 695px;
|
||
|
|
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>
|