rt-sim-training-client/src/views/drts/scene/modify.vue

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" :before-close="doClose" top="50px" center custom-class="sceneModifyOut">
    <el-form ref="form" :model="formModel" label-width="120px" class="sceneModify">
      <!-- :rules="rules"  -->
      <el-table :data="actionList" border style="width:100%;" height="550" :span-method="objectSpanMethod">
        <el-table-column label="步骤名称" width="100">
          <template slot-scope="scope">
            <div v-if="stepVOs[scope.row.id]">
              {{ stepVOs[scope.row.id].description||'' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="动作内容" width="300">
          <template slot-scope="scope">
            <!-- v-model="scope.row.id"  -->
            <el-checkbox v-if="isModify" v-model="checkBoxActionList[scope.row.id].status" :disabled="checkBoxActionList[scope.row.id].disabled" class="checkBoxAction" @change="((val)=>{changeSelectActionId(val, scope.row.id, scope.$index)})" />
            <div v-if="dialogVisible">{{ covert(scope.row) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="语音识别关键词列表" width="300">
          <template slot-scope="scope">
            <div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].keyWords">
              <el-tag v-for="(tag,index) in commandEvaluationRuleVOs[scope.row.id].keyWords" :key="index" closable :disable-transitions="false" @close="handleClose(scope.row.id,index)">{{ tag }}</el-tag>
              <el-input
                v-if="commandEvaluationRuleVOs[scope.row.id].inputVisible"
                :ref="'saveTagInput'+scope.row.id"
                v-model="commandEvaluationRuleVOs[scope.row.id].inputValue"
                size="small"
                class="input-new-tag"
                @keyup.enter.native="handleInputConfirm(scope.row.id)"
                @blur="handleInputConfirm(scope.row.id)"
              />
              <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row.id)">添加</el-button>
            </div>
            <div v-else>
              <el-button class="button-new-tag" size="small" @click="addKeyWord(scope.row.id)">添加</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总分值" width="149">
          <template slot-scope="scope">
            <div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].score!=undefined">
              <el-input-number
                v-if="commandEvaluationRuleVOs[scope.row.id].scoreVisible"
                :ref="'saveScoreInput'+scope.row.id"
                v-model="commandEvaluationRuleVOs[scope.row.id].score"
                :min="0"
                size="small"
                :max="Infinity"
                :step="1"
                @keyup.enter.native="handleScoreConfirm(scope.row.id)"
                @blur="handleScoreConfirm(scope.row.id)"
              />
              <div v-else style="cursor:pointer" @click="modifyScore(scope.row.id)">
                {{ commandEvaluationRuleVOs[scope.row.id].score }}
              </div>
            </div>
            <div v-else>
              <el-button class="button-new-tag" size="small" @click="addScore(scope.row.id)">编辑</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="超时时间" width="150">
          <template slot-scope="scope">
            <div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].timeOut!=undefined">
              <el-input-number
                v-if="commandEvaluationRuleVOs[scope.row.id].timeOutVisible"
                :ref="'saveTimeOutInput'+scope.row.id"
                v-model="commandEvaluationRuleVOs[scope.row.id].timeOut"
                :min="0"
                size="small"
                :max="Infinity"
                :step="1"
                @keyup.enter.native="handleTimeOutConfirm(scope.row.id)"
                @blur="handleTimeOutConfirm(scope.row.id)"
              />
              <div v-else style="cursor:pointer" @click="modifyTimeOut(scope.row.id)">
                {{ commandEvaluationRuleVOs[scope.row.id].timeOut }}
              </div>
            </div>
            <div v-else>
              <el-button class="button-new-tag" size="small" @click="addTimeOut(scope.row.id)">编辑</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="扣除分值" width="150">
          <template slot-scope="scope">
            <div v-if="commandEvaluationRuleVOs[scope.row.id]&&commandEvaluationRuleVOs[scope.row.id].deductScore!=undefined">
              <el-input-number
                v-if="commandEvaluationRuleVOs[scope.row.id].deductScoreVisible"
                :ref="'saveDeductScoreInput'+scope.row.id"
                v-model="commandEvaluationRuleVOs[scope.row.id].deductScore"
                :min="0"
                size="small"
                :max="Infinity"
                :step="1"
                @keyup.enter.native="handleDeductScoreConfirm(scope.row.id)"
                @blur="handleDeductScoreConfirm(scope.row.id)"
              />
              <div v-else style="cursor:pointer" @click="modifyDeductScore(scope.row.id)">
                {{ commandEvaluationRuleVOs[scope.row.id].deductScore }}
              </div>
            </div>
            <div v-else>
              <el-button class="button-new-tag" size="small" @click="addDeductScore(scope.row.id)">编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="margin-top:15px;">
      <el-button v-if="!isModify" type="primary" @click="doModifyDes">编辑步骤描述</el-button>
      <el-button v-if="isModify" type="success" @click="cancleModifyDes">取消编辑步骤描述</el-button>
      <el-button v-if="idOperateStatistic" type="success" @click="doOperateStatistic">编辑运营统计</el-button>
    </div>
    <step-description
      ref="addStepDescription"
      @cancleDescription="cancleDescription"
      @submitDescription="submitDescription"
    />
    <operate-statistic ref="operateStatistic" @submitOperateStatistic="submitOperateStatistic" />

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doUpdate">{{ $t('global.confirm') }}</el-button>
      <el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
// import store from '@/store/index_APP_TARGET';
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
import {getScriptByIdNew} from '@/api/script';
import StepDescription from './stepDescription';
import OperateStatistic from './operateStatistic';
import {covertOperate} from '@/views/newMap/displayNew/scriptDisplay/component/covertOperation';
import {updateCompetitionPracticalStep, getCompetitionPracticalSceneById} from '@/api/competition';
import {getPublishMapDetailById} from '@/api/jmap/map';
export default {
    name:'ModifyStep',
    components:{
        StepDescription,
        OperateStatistic
    },
    props: {
        title:{
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            isModify:false,
            dialogVisible:false,
            actionList:[],
            memberList:[],
            checkBoxActionList:[],
            commandEvaluationRuleVOs:{},
            currentstepAction:[],
            startArray:[],
            endArray:[],
            stepVOs:{},
            formModel:{
                id:'',
                name:'',
                main:true,
                description:'',
                disposalProcesses:'',
                operationScore:'',
                scriptId:'',
                commandEvaluationRuleVOs:[],
                stepVOs:[],
                operationStatisticVO:{}
            }
        };
    },
    computed: {
        idOperateStatistic() {
            return Object.values(this.stepVOs).length > 2;
        }
    },
    methods:{
        doShow(row) {
            // 加载剧本数据
            this.formModel.id = row.id;
            this.formModel.name = row.name;
            this.formModel.main = row.main;
            this.formModel.description = row.description;
            this.formModel.disposalProcesses = row.disposalProcesses;
            this.formModel.operationScore = row.operationScore;
            this.formModel.scriptId = row.scriptId;
            getScriptByIdNew(row.scriptId).then(res=>{
                this.actionList = res.data.actionList;
                getCompetitionPracticalSceneById(row.id).then(response=>{
                    const commandEvaluationRuleVOs = {};
                    if (response.data.commandEvaluationRuleVOs) {
                        response.data.commandEvaluationRuleVOs.forEach(data=>{
                            commandEvaluationRuleVOs[data.actionId] = data;
                        });
                    }
                    const stepVOs = {};
                    if (response.data.stepVOs) {
                        response.data.stepVOs.forEach(data=>{
                            stepVOs[data.startActionId] = data;
                            const dataIndex = this.actionList.findIndex((value, index, arr)=>{ return value.id == data.startActionId; });
                            const dataIndex1 = this.actionList.findIndex((value, index, arr)=>{ return value.id == data.endActionId; });
                            this.startArray.push(dataIndex);
                            this.endArray.push(dataIndex1);
                        });
                    }
                    this.commandEvaluationRuleVOs = commandEvaluationRuleVOs;
                    if (response.data.operationStatisticVO) {
                        this.formModel.operationStatisticVO = response.data.operationStatisticVO;
                    }
                    this.stepVOs = stepVOs;
                });
                // 加载地图数据
                getPublishMapDetailById(res.data.mapId).then(resp => {
                    this.$store.dispatch('map/setMapData', resp.data);
                    const stationMap = {};
                    resp.data.stationList.forEach(station=>{
                        stationMap[station.code] = station;
                    });
                    let lastData = JSON.stringify(res.data.memberList);
                    const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
                    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);
                    const lastMemberList = {};
                    lastData.forEach((member, index)=>{
                        const userName = member.userName ? '-' + member.userName : '';
                        const name = member.name ? '-' + member.name : '';
                        if (member.deviceCode && member.type == '行值') {
                            const device = stationMap[member.deviceCode];
                            member.deviceName = device.name;
                            // || device.groupNumber
                            member.label = member.type + member.deviceName + name + userName;
                            member.normalName = member.type + member.deviceName + name;
                        } else if (member.deviceCode && member.type == '司机') {
                            member.deviceName = member.deviceCode;
                            member.label = member.type + member.deviceName + name + userName;
                        } else {
                            member.deviceName = '';
                            member.label = member.type + name + userName;
                            member.normalName = member.type + name;
                        }
                        lastMemberList[member.id] = member;
                        this.memberList = lastMemberList;
                        this.dialogVisible = true;
                    });
                });
            });
        },
        doClose() {
            // this.$refs.dataform.resetForm();
            this.dialogVisible = false;
            this.$store.dispatch('map/mapClear');
        },
        covert(element) {
            const member = this.memberList[element.memberId];
            let resultData = '';
            if (element.type == 'Conversation') {
                resultData = member.label + '说：' + element.content;
            } else if (element.type == 'Operation') {
                resultData = covertOperate(element.operationType, element.operationParamMap);
                resultData = resultData.replace('请', member.label);
                // this.scriptTipMessage = '请找到' + deviceName + '，执行【' + operateName.label + '】操作';
            } else if (element.type == 'Exit_Conversation') {
                resultData = member.label + '结束当前会话';
            } else if (element.type == 'Start_Conversation' ) {
                const inviteMember = [];
                // this.$emit('allowCreatCoversition');
                element.conversationMemberIds.forEach(id=>{
                    if (element.memberId != id) {
                        inviteMember.push((this.memberList[id] || {label: ''}).label);
                    }
                });
                resultData = member.label + '创建会话,选择' + inviteMember.toString();
            } else if (element.type == 'Command') {
                const targetName = this.memberList[element.commandInitiateVO.targetMemberId];
                const CommandList = {
                    Drive_Ahead:'确认运行至前方站',
                    Route_Block_Drive:'进路闭塞法行车',
                    Drive_Through_The_Guide_Signal:'越引导信号行驶',
                    Drive_Through_The_Red_Light:'越红灯行驶',
                    Drive_In_Urm_Mode:'URM模式驾驶',
                    Set_Speed_Limit:'设置限速',
                    Open_Or_Close_Door:'开关门',
                    Switch_Hook_Lock: '道岔钩锁'
                };
                resultData = member.label + '对【' + targetName.label + '】下达【' + CommandList[element.commandInitiateVO.commandType] + '】指令';
            } else if (element.type == 'Drive') {
                if (element.targetSectionCode) {
                    const section = this.$store.getters['map/getDeviceByCode'](element.targetSectionCode);
                    if (section && section.name) {
                        resultData = member.label + '把车开到区段' + section.name;
                    }
                }
            }
            return resultData;
        },
        initCommandEvaluationRuleVOs(actionId) {
            if (!this.commandEvaluationRuleVOs[actionId]) {
                this.$set(this.commandEvaluationRuleVOs, actionId, {});
                this.$set(this.commandEvaluationRuleVOs[actionId], 'actionId', actionId);
            }
        },
        addKeyWord(actionId) {
            this.initCommandEvaluationRuleVOs(actionId);
            this.$set(this.commandEvaluationRuleVOs[actionId], 'inputValue', '');
            this.$set(this.commandEvaluationRuleVOs[actionId], 'keyWords', []);
            this.$set(this.commandEvaluationRuleVOs[actionId], 'inputVisible', true);
            this.$nextTick(_ => {
                this.$refs['saveTagInput' + actionId].$refs.input.focus();
            });
        },
        addScore(actionId) {
            this.initCommandEvaluationRuleVOs(actionId);
            this.$set(this.commandEvaluationRuleVOs[actionId], 'score', 0);
            this.$set(this.commandEvaluationRuleVOs[actionId], 'scoreVisible', true);
            this.$nextTick(_ => {
                this.$refs['saveScoreInput' + actionId].$refs.input.focus();
            });
        },
        addTimeOut(actionId) {
            this.initCommandEvaluationRuleVOs(actionId);
            this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOut', 0);
            this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOutVisible', true);
            this.$nextTick(_ => {
                this.$refs['saveTimeOutInput' + actionId].$refs.input.focus();
            });
        },
        handleTimeOutConfirm(actionId) {
            this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOutVisible', false);
        },
        modifyTimeOut(actionId) {
            this.$set(this.commandEvaluationRuleVOs[actionId], 'timeOutVisible', true);
            this.$nextTick(_ => {
                this.$refs['saveTimeOutInput' + actionId].$refs.input.focus();
            });
        },
        showInput(actionId) {
            this.commandEvaluationRuleVOs[actionId].inputVisible = true;
            this.$nextTick(_ => {
                this.$refs['saveTagInput' + actionId].$refs.input.focus();
            });
        },
        handleInputConfirm(actionId) {
            const inputValue = this.commandEvaluationRuleVOs[actionId].inputValue;
            if (inputValue) {
                this.commandEvaluationRuleVOs[actionId].keyWords.push(inputValue);
            }
            this.$set(this.commandEvaluationRuleVOs[actionId], 'inputVisible', false);
            this.$set(this.commandEvaluationRuleVOs[actionId], 'inputValue', '');
        },
        handleScoreConfirm(actionId) {
            this.$set(this.commandEvaluationRuleVOs[actionId], 'scoreVisible', false);
        },
        modifyScore(actionId) {
            this.$set(this.commandEvaluationRuleVOs[actionId], 'scoreVisible', true);
            this.$nextTick(_ => {
                this.$refs['saveScoreInput' + actionId].$refs.input.focus();
            });
        },
        handleClose(index, tagIndex) {
            const keyWords = this.commandEvaluationRuleVOs[index].keyWords;
            keyWords.splice(tagIndex, 1);
        },
        handleDeductScoreConfirm(actionId) {
            this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScoreVisible', false);
        },
        modifyDeductScore(actionId) {
            this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScoreVisible', true);
            this.$nextTick(_ => {
                this.$refs['saveDeductScoreInput' + actionId].$refs.input.focus();
            });
        },
        addDeductScore(actionId) {
            this.initCommandEvaluationRuleVOs(actionId);
            this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScore', 0);
            this.$set(this.commandEvaluationRuleVOs[actionId], 'deductScoreVisible', true);
            this.$nextTick(_ => {
                this.$refs['saveDeductScoreInput' + actionId].$refs.input.focus();
            });
        },
        doUpdate(operationStatisticVO = null) {
            let commandEvaluationRuleVOs = Object.values(this.commandEvaluationRuleVOs);
            const stepVOs = Object.values(this.stepVOs);
            commandEvaluationRuleVOs = commandEvaluationRuleVOs.filter(eachData=>{
                return (eachData.keyWords && eachData.keyWords.length > 0) || eachData.timeOut || eachData.score || eachData.deductScore;
            });
            if (stepVOs.length > 0) {
                stepVOs.sort(this.objectSort('startActionId'));
                stepVOs.map((step, index)=>{
                    step.id = (index + 1);
                });
            }
            if (commandEvaluationRuleVOs.length > 0) {
                commandEvaluationRuleVOs.map(data=>{
                    delete data.inputValue;
                    delete data.inputVisible;
                    delete data.scoreVisible;
                    delete data.timeOutVisible;
                    delete data.deductScoreVisible;
                });
            }
            if (operationStatisticVO) {
                this.formModel.operationStatisticVO = operationStatisticVO;
            }
            this.formModel.commandEvaluationRuleVOs = commandEvaluationRuleVOs;
            this.formModel.stepVOs = stepVOs;
            updateCompetitionPracticalStep(this.formModel).then(res=>{
                this.$message.success('编辑步骤信息成功');
            }).catch(error=>{
                this.$message.success('编辑步骤信息失败:' + error.message);
            });
        },
        doModifyDes() {
            this.actionList.forEach(action=>{
                this.$set(this.checkBoxActionList, action.id, {status:false});
            });
            this.startArray.forEach((start, index)=>{
                for (var i = start; i <= this.endArray[index]; i++) {
                    this.$set(this.checkBoxActionList, this.actionList[i].id, {disabled:true});
                }
            });
            this.isModify = true;
        },
        cancleModifyDes() {
            this.isModify = false;
        },
        changeSelectActionId(val, actionId, index) {
            if (val) {
                this.currentstepAction.push({'actionId':actionId, 'index':index});
                if (this.currentstepAction.length >= 2) {
                    this.$refs.addStepDescription.doShow();
                }
            } else {
                const data = this.currentstepAction.findIndex((value, index, arr)=>{ return value.actionId == actionId; });
                this.currentstepAction.splice(data, 1);
            }
        },
        cancleDescription() {
            this.currentstepAction.forEach(data=>{
                this.checkBoxActionList[data.actionId].status = false;
            });
            this.currentstepAction = [];
        },
        submitDescription(stepDescription) {
            this.currentstepAction.sort(this.objectSort('actionId'));
            let start, end;
            this.currentstepAction.forEach((data, index)=>{
                if (index % 2 == 0) {
                    this.startArray.push(data.index);
                    start = data.index;
                } else {
                    this.endArray.push(data.index);
                    end = data.index;
                }
            });
            for (var i = start; i <= end; i++) {
                this.$set(this.checkBoxActionList, this.actionList[i].id, {disabled:true});
            }
            this.$set(this.stepVOs, this.currentstepAction[0].actionId, {description:stepDescription, startActionId:parseInt(this.currentstepAction[0].actionId), endActionId:parseInt(this.currentstepAction[1].actionId)});
            this.cancleDescription();
        },
        submitOperateStatistic(formModel) {
            this.doUpdate(formModel);
        },
        objectSort(keyName) {
            return function (objectN, objectM) {
                var valueN = parseInt(objectN[keyName]);
                var valueM = parseInt(objectM[keyName]);
                if (valueN > valueM) return 1;
                else if (valueN < valueM) return -1;
                else return 0;
            };
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (this.startArray.length > 0) {
                if (columnIndex === 0) {
                    let rowspan = 1;
                    let colspan = 1;
                    for (var i = 0; i < this.startArray.length; i++) {
                        if (rowIndex == this.startArray[i]) {
                            rowspan = this.endArray[i] - this.startArray[i] + 1;
                            colspan = 1;
                        } else if (rowIndex > this.startArray[i] && rowIndex <= this.endArray[i]) {
                            rowspan = 0;
                            colspan = 0;
                        }
                    }
                    return {
                        rowspan:rowspan,
                        colspan:colspan
                    };
                }
            }
        },
        doOperateStatistic() {
            this.$refs.operateStatistic.doShow(this.stepVOs, this.formModel.operationStatisticVO);
        }
    }

};
</script>
<style lang="scss" scoped>
.checkBoxAction{
    display: inline-block;
    float: left;
    margin-right: 8px;
}
.input-new-tag {
    width: 60px;
    margin-left: 10px;
    margin-bottom: 10px;
    vertical-align: bottom;
}
.button-new-tag{
    margin-bottom:10px;
}
</style>
<style lang="scss">
.el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align:top;
}
</style>