rt-sim-training-client/src/views/dispatcherStationManage/dispatchCmd.vue

<template>
  <el-dialog
    v-dialogDrag
    class="dispatcher-cmd chengdou-03__systerm"
    :title="title"
    :visible.sync="show"
    width="1300px"
    :before-close="doClose"
    :z-index="2010"
    :modal="false"
    :close-on-click-modal="false"
    append-to-body
  >
    <div class="main">
      <el-row style="height: 100%;">
        <el-col :span="6" style="height: 100%;">
          <div class="left">
            <el-tabs v-model="activeTab" type="border-card" @tab-click="tabClick">
              <el-tab-pane label="操作" name="operate">
                <div class="operate-box">
                  <div class="create-cmd">
                    <el-button type="primary" @click="initData">新建调度命令</el-button>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="查询" name="search">
                <div class="search-box">
                  <div>查询</div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="middle">
            <el-tabs v-model="cmdTab" type="border-card">
              <el-tab-pane label="调度命令" name="cmd">
                <el-form ref="form" :model="command" label-width="80px">
                  <el-form-item label="命令标题">
                    <el-input v-model="command.title" />
                  </el-form-item>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="命令号">
                        <el-input v-model="command.number" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="发令时间">
                        <el-date-picker v-model="command.sendTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-col :span="12">
                    <el-form-item label="发令人">
                      <el-select v-model="command.senderName" disabled placeholder="请选择" style="width: 100%;" @change="senderChange">
                        <el-option
                          v-for="item in memberDataList"
                          :key="item.id"
                          :label="item.labelName"
                          :value="item.labelName"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发令单位">
                      <el-input v-model="command.companyOfSender" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="授权时间">
                      <el-date-picker v-model="command.authorizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="授权状态">
                      <el-input v-model="command.authorizationStatus" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="定稿时间">
                      <el-date-picker v-model="command.finalizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="审核人">
                      <el-select v-model="command.reviewerId" placeholder="请选择" style="width: 100%;">
                        <el-option
                          v-for="item in simulationUserList"
                          :key="item.memberId"
                          :label="item.nickName"
                          :value="item.memberId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="拟令人">
                      <el-select v-model="command.author" placeholder="请选择" style="width: 100%;">
                        <el-option
                          v-for="item in simulationUserList"
                          :key="item.memberId"
                          :label="item.nickName"
                          :value="item.memberId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="命令分类">
                      <el-select v-model="command.type" placeholder="请选择" style="width: 100%;">
                        <el-option
                          v-for="item in typeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-tab-pane>
            </el-tabs>
            <el-tabs v-model="textTab" type="border-card">
              <el-tab-pane label="命令正文" name="text">
                <div class="cmd-box">
                  <div>
                    <el-input v-model="cmdTextarea" type="textarea" :rows="6" placeholder="请输入内容" />
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <div>
              <div class="table-title">
                <span>受令列表</span>
                <!-- <el-checkbox v-model="tableChecked">全选</el-checkbox> -->
              </div>
              <div class="table">
                <el-table ref="table" :data="getTableData" border style="width: 100%" height="200" @selection-change="selectionChange">
                  <el-table-column type="selection" width="50" />
                  <el-table-column prop="deviceName" label="受令单位" width="180" />
                  <el-table-column prop="copyers" label="抄送" width="180" />
                  <el-table-column prop="signStatus" label="签收状态" />
                  <el-table-column prop="signedBy" label="签收人" />
                  <el-table-column prop="signTime" label="签收时间" />
                </el-table>
              </div>
            </div>
            <div class="midle-bottom">
              <el-button type="primary" @click="sendCmd">下达</el-button>
              <el-button type="primary" @click="doClose">关闭</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="right">
            常用词汇
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import { sendCommandNew } from '@/api/jmap/training';
import { mapState } from 'vuex';
export default {
    name:'DispatcherCmd',
    data() {
        return {
            dialogShow: false,
            activeTab: 'operate',
            cmdTab: 'cmd',
            textTab: 'text',
            typeOptions: [
                {label: '正常调度命令', value: 'NORMAL'}
            ],
            command: {
                title: '',
                number: '',
                sendTime: '',
                senderId: '',
                senderName: '',
                companyOfSender: '',
                authorizationTime: '',
                authorizationStatus: '',
                finalizationTime: '',
                reviewerId: '',
                author: '',
                receiverIds: [],
                type: '',
                content: '',
                allSigned: ''
            },
            cmdTextarea: '',
            tableChecked: false,
            memberDataList: []
        };
    },
    computed: {
        ...mapState('training', [
            'memberList', 'memberData', 'simulationUserList'
        ]),
        show() {
            return this.dialogShow;
        },
        group() {
            return this.$route.query.group;
        },
        title() {
            return '调度命令管理系统';
        },
        mapSimulationUserList() {
            const obj = {};
            this.simulationUserList.forEach(item => {
                obj[item.userId] = item;
            });
            return obj;
        },
        getTableData() {
            const mList = this.memberList.filter(item => {
                return item.type == 'STATION_SUPERVISOR';
            });
            const list = [];
            mList.forEach(item => {
                const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
                const useInfo = this.mapSimulationUserList[item.userId];
                const obj = {
                    ...item,
                    userId: item.userId + '',
                    deviceName: device ? device.name : '',
                    nickName: useInfo ? useInfo.nickName : '',
                    copyers: '',
                    signStatus: false,
                    signer: '',
                    signTime: ''
                };
                list.push(obj);
            });
            return list;
        }
    },
    watch: {},
    beforeDestroy() {},
    mounted() {},
    methods:{
        initData() {
            this.command = {
                title: '',
                number: '',
                sendTime: '',
                senderId: '',
                senderName: this.command.senderName,
                companyOfSender: '',
                authorizationTime: '',
                authorizationStatus: '',
                finalizationTime: '',
                reviewerId: '',
                author: '',
                receiverIds: [],
                type: '',
                content: '',
                allSigned: ''
            };
            this.cmdTextarea = '';
            this.$refs.table.clearSelection();
        },
        senderChange(memberId) {
            const obj = this.mapSimulationUserList.find(item => {
                return item.memberId == memberId;
            });
            if (obj) {
                const device = this.$store.getters['map/getDeviceByCode'](obj.deviceCode);
                this.command.companyOfSender = device ? device.name : '';
            }
        },
        getSenderName() {
            const activeUser = this.memberDataList.find(item => {
                return item.userId == this.$store.state.user.id;
            });
            if (activeUser) {
                // this.command.senderId = activeUser.id;
                this.command.senderName = activeUser.labelName;
            }
        },
        doShow() {
            this.memberDataList = Object.values(this.memberData);
            this.getSenderName();
            this.dialogShow = true;
        },
        doClose() {
            this.dialogShow = false;
        },
        tabClick() {
            console.log('tabClick');
        },
        selectionChange(selection) {
            const arr = [];
            selection.forEach(item => {
                arr.push(item.id);
            });
            this.command.receiverIds = arr;
            console.log(this.simulationUserList, '----simulationUserList----');
        },
        sendCmd() {
            this.command.content = this.cmdTextarea;
            const data = {
                command: this.command
            };
            sendCommandNew(this.group, 'CTC_SEND_DISPATCH_COMMAND', data).then((res) => {
                console.log(res, '---res');
                this.$message.success('发送调度命令成功！');
                this.initData();
            }).catch(error => {
                this.$messageBox('发送调度命令失败：' + error.message);
            });
        },
        searchCmd() {
            sendCommandNew(this.group, 'CTC_QUERY_DISPATCH_COMMAND').then((res) => {
                console.log(res, '---res----');
            }).catch(error => {
                this.$messageBox('查询调度命令失败：' + error.message);
            });
        }
    }

};
</script>
<style lang="scss" scoped>
// .dispatcher-cmd{
// }
.main {
	height: 100%;
	.left {
		height: 100%;
		.create-cmd {
			text-align: end;
		}
	}
	/deep/ .el-tabs__item {
		height: 30px !important;
		line-height: 30px !important;
	}
	.middle {
		/deep/ .el-form-item {
			margin-bottom: 0px;
		}
		.el-input {
			/deep/ .el-input__icon {
				line-height: 22px;
			}
		}
		.midle-bottom {
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
<style>
.dispatcher-cmd .el-dialog .el-dialog__body {
	padding: 5px !important;
}
.dispatcher-cmd .el-dialog {
	margin-top: 8vh !important;
}
</style>