rt-sim-training-client/src/views/scriptManage/scriptRecord/getActionNew.vue

<template>
  <el-scrollbar ref="elActionScrollbar" wrap-class="scrollbar-wrapper" class="scriptBottom" :style="{width:370+'px',height:size.height+'px'}">
    <el-timeline :reverse="reverse" class="el_timeline">
      <el-timeline-item v-for="(actionInfo,index) in actionInfoList" :key="index">
        <el-card>
          <div class="actionTable">
            <span class="detail" v-html="actionInfo.detail" />
            <span class="otherInfo" v-html="actionInfo.otherInfo" />
            <span v-if="actionInfo.isStartCoversition">
              <span class="roleClass">{{ actionInfo.memberName }}</span>
              <span>邀请</span>
              <span class="roleClass">{{ actionInfo.targetName }}</span>
              <span>开始会话</span>
            </span>
            <span v-else-if="actionInfo.isDrive">
              <span class="roleClass">{{ actionInfo.memberName }}</span>
              <span>把车开到</span>
              <span class="commandStyle">区段{{ actionInfo.targetName }}</span>
            </span>
            <span v-else-if="actionInfo.isCoversition">
              <span class="roleClass">{{ actionInfo.memberName }}</span>
              <!-- <span>{{ $t('scriptRecord.speakTo') }}</span> -->
              <!-- <span class="roleClass">{{ actionInfo.targetName }}</span> -->
              <span>: </span>
              <span v-if="!isModify">{{ actionInfo.reply }}</span>
              <textarea v-else v-model="modifyText" type="text" class="modifyText" />
            </span>
            <span v-else>
              <span class="roleClass">{{ actionInfo.memberName }}</span>
              <span>{{ $t('scriptRecord.executeCommandTips') }}</span>
              <span class="commandStyle">{{ actionInfo.command }}</span>
            </span>
          </div>
          <div class="btnGroup">
            <el-button v-if="actionInfo.visible && !isModify" type="primary" size="mini" style="margin-left:10px;" @click="modifyAction(actionInfo.row)">{{ $t('scriptRecord.modifyConversitionButton') }}</el-button>
            <el-button v-if="actionInfo.visible && isModify" :loading="modifyTextLoading" type="danger" size="mini" style="margin-left:10px;" @click="confirmModify(actionInfo.row)">确定</el-button>
            <el-button v-if="actionInfo.visible && isModify" type="" size="mini" style="margin-left:10px;" @click="cancleModify">取消</el-button>
            <!-- <el-button type="danger" size="mini" @click="deleteAction(actionInfo.id)">删除</el-button> -->
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-scrollbar>
</template>
<script>
import Cookies from 'js-cookie';
import {getScriptAllAction, getScriptMemberDataNew, modifyScriptActionNew } from '@/api/simulation';
import CMD from '@/scripts/cmdPlugin/CommandEnum';
// import CommandHandler from '@/scripts/cmdPlugin/CommandHandler';
import ConstConfig from '@/scripts/ConstConfig';
export default {
    name: 'GetActionNew',
    props: {
        group: {
            type: String,
            required: true
        },
        size: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            actionInfoList: [],
            deviceCommandList: [],
            memberVOList:[],
            reverse: false,
            loading: true,
            isModify:false,
            modifyText:'',
            modifyTextLoading:false,
            // behaviorName:"",
            memberName: ''
        };
    },
    computed:{
        // drawWay() {
        //     const drawWay = this.$route.query.drawWay;
        //     return drawWay && JSON.parse(drawWay);
        // }
    },
    watch: {
        actionInfoList: function(val) {
            this.$nextTick(function() {
                var div = this.$refs['elActionScrollbar'].$refs['wrap'];
                div.scrollTop = this.$refs['elActionScrollbar'].wrap.scrollHeight;
            });
        },
        '$store.state.socket.scriptAction':function(val) {
            this.covertData(this.memberVOList, val);
        }
    },
    mounted() {
        this.loadInitData();
    },
    methods: {
        loadInitData() {
            this.loadOtherData(this.$route.query);
        },
        covert(data, roleTypeList) {
            let lastData = data;
            roleTypeList.forEach(function(element) {
                const rolename = element.value;
                if (Cookies.get('user_lang') == 'en') {
                    lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
                } else {
                    lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
                }
            });
            lastData = JSON.parse(lastData);
            lastData.forEach(each=>{
                const name = each.name == undefined ? '' : '-' + each.name;
                const deviceName = each.deviceName == undefined ? '' : '-' + each.deviceName;
                each.name = each.role + deviceName + name;
            });
            return lastData;
        },
        covertData(memberVOList, element) {
            const member = memberVOList.find(elem=>{ return elem.id == element.memberId; });
            const memberName = member.name;
            switch (element.type) {
            case 'Start_Conversation': {
                // isStartCoversition
                const targetNameList = [];
                element.conversationMemberIds.forEach(id=>{
                    if (member.id != id) {
                        const userName = memberVOList.find(elem=>{ return elem.id == id; });
                        targetNameList.push(userName.name);
                    }
                });
                this.actionInfoList.push({id: element.id, isStartCoversition: true, memberName: memberName, targetName:targetNameList.toString() });
                break;
            }
            case 'Drive': {
                this.actionInfoList.push({id: element.id, isDrive: true, memberName: memberName, targetName:this.covertSection(element.targetSectionCode)});
                break;
            }
            case 'Conversation':
            {
                this.actionInfoList.push({id: element.id, isCoversition: true, memberName: memberName, reply: element.content, row: element, visible: true});
                break;
            }
            case 'Command':
            {
                // const command = CommandHandler.getScriptDefinition(element.operationType);
                const commandName = element.operationType;
                let operateType = commandName.split('_')[0];
                const data = commandName.toUpperCase();
                if (operateType == 'CM') {
                    operateType = 'ControlConvertMenu';
                }
                const operateName = CMD[operateType]['CMD_' + data];
                const deviceTypeList = {Section:'区段', Switch:'道岔', Signal:'信号机', Stand:'站台', Station:'车站', TrainWindow:'车次窗', ControlConvertMenu:'控制模式', Driver:'司机'};
                const operateTypeName = deviceTypeList[operateType];
                this.actionInfoList.push({id: element.id, isCoversition: false, memberName: memberName, command: operateTypeName + '(' + operateName.label + ')', row: element, visible: false});
                break;
            }
            }
        },
        covertSection(sectionCode) {
            const section = this.$store.getters['map/getDeviceByCode'](sectionCode);
            if (section && section.name) {
                return section.name;
            } else {
                return '';
            }
        },
        loadOtherData(obj) {
            const group = obj.group;
            getScriptMemberDataNew(this.group).then(response => {
                const lastData = JSON.stringify(response.data);
                this.memberVOList = this.covert(lastData, ConstConfig.ConstSelect.roleTypeNew);
                getScriptAllAction(group).then(resp=>{
                    this.actionInfoList = [];
                    const actionList = resp.data;
                    actionList.forEach(element => {
                        this.covertData(this.memberVOList, element);
                    });
                }).catch(error => {
                    this.$message(error.message);
                });
            }).catch(error => {
                this.$message(error.message);
            });
        },
        reloadTable() {
            this.loadInitData();
        },
        modifyAction(row) {
            this.modifyText = row.content;
            this.isModify = true;
        },
        cancleModify() {
            this.modifyText = '';
            this.isModify = false;
        },
        confirmModify(row) {
            if (this.modifyText != row.content) {
                // memberId:row.memberId, type:row.type
                const data = {id:row.id};
                data.content = this.modifyText;
                this.modifyTextLoading = true;
                modifyScriptActionNew(this.group, data).then(response=>{
                    this.modifyText = '';
                    this.isModify = false;
                    this.modifyTextLoading = false;
                });
            } else {
                if (!this.modifyText) {
                    this.$messageBox('请输入修改的会话');
                } else {
                    this.modifyText = '';
                    this.isModify = false;
                }
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .actionTable{
        width:280px;
        padding: 15px 0px 10px 15px;
        display: inline-block;
        line-height: 200%;
    }
    .btnGroup{
        padding: 0px 10px 10px 10px;
        float: right;
        vertical-align: top;
        display: inline-block;
    }
    .el_timeline{
        width: 350px;
        margin-top:5px;
        padding-left: 25px;
    }
    .el-timeline{
        font-size:13px;
    }
    .roleClass{
        color:#409EFF
    }
    .commandStyle{
        color:#F00;
    }
    .scriptPane{
        height: 100%;
        padding-top:200px;
    }
    .scriptBottom{
        margin-left:300px;
        margin-top: 0px;
        font-size:13px;
    }
    .modifyText{
        height: 70px;
        border: 1px #ccc solid;
        border-radius: 3px;
        width: 226px;
        outline: none;
        font-size: 13px;
        resize: none;
        vertical-align: top;
        padding: 5px;
        line-height: 20px;
    }
</style>