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

677 lines
27 KiB
Vue
Raw Normal View History

2022-06-28 11:29:38 +08:00
<template>
<el-dialog
v-dialogDrag
class="dispatcher-cmd chengdou-03__systerm"
:title="title"
:visible.sync="show"
2022-06-29 10:36:57 +08:00
width="1300px"
2022-06-28 11:29:38 +08:00
: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">
2022-06-29 10:36:57 +08:00
<el-tabs v-model="activeTab" type="border-card" @tab-click="tabClick">
2022-06-28 11:29:38 +08:00
<el-tab-pane label="操作" name="operate">
<div class="operate-box">
2022-06-30 18:13:23 +08:00
<div class="create-cmd">
2022-07-07 15:03:41 +08:00
<span>数据库正常</span>
<div>
<!-- <el-input-number v-model="numTime" controls-position="right" :min="1" :max="24" size="mini" style="width: 83px" /> -->
<el-select v-model="numTime" placeholder="请选择" style="width: 66px;">
<el-option label="24" value="24" />
<el-option label="12" value="12" />
</el-select>
<span>小时</span>
</div>
<span style="width: 85px; font-weight: bold; text-align: end;">{{ getSimulationTime }}</span>
</div>
<div class="create-cmd">
<span>通信正常</span>
<el-button type="primary" @click="refreshSearch">刷新</el-button>
<el-button type="primary" style="width: 100px" @click="createCmd">新建调度命令</el-button>
</div>
<div class="box-title">
<div class="contant-null" />
<div class="contant-text">缓存命令</div>
<div class="contant-icon" @click="active1=!active1">
<i v-if="active1" class="el-icon-arrow-down" />
<i v-else class="el-icon-arrow-up" />
</div>
</div>
<div v-show="active1" class="left-table1">
<el-table ref="table1" :data="cacheTableData" border style="width: 100%" height="100" highlight-current-row @current-change="handleCurrentChange($event, 'table1')">
<el-table-column prop="number" label="命令号" width="80" />
<el-table-column prop="deviceName" label="识别号" width="80" />
<el-table-column prop="title" label="命令标题" show-overflow-tooltip />
<el-table-column prop="sendTime" label="接收单位" show-overflow-tooltip width="160">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ JoinDeviceNameStr(scope.row.receiverInfos) || '' }}</span>
</template>
</el-table-column>
<el-table-column prop="senderName" label="发令人" />
<el-table-column prop="companyOfSender" label="发令单位" />
<el-table-column label="命令类型" width="100">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ typeObj[scope.row.type] || '' }}</span>
</template>
</el-table-column>
<el-table-column prop="content" label="命令正文" show-overflow-tooltip />
</el-table>
</div>
<div class="box-title">
<div class="contant-null" />
<div class="contant-text">接受命令</div>
<div class="contant-icon" @click="active2=!active2">
<i v-if="active2" class="el-icon-arrow-down" />
<i v-else class="el-icon-arrow-up" />
</div>
</div>
<div v-show="active2" class="left-table1">
<el-table ref="table2" :data="receivedTableData" border style="width: 100%" height="100" highlight-current-row @current-change="handleCurrentChange($event, 'table2')">
<el-table-column prop="number" label="命令号" width="80" />
<el-table-column prop="title" label="命令标题" show-overflow-tooltip />
<el-table-column prop="sendTime" label="接收单位" show-overflow-tooltip width="160">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ JoinDeviceNameStr(scope.row.receiverInfos) || '' }}</span>
</template>
</el-table-column>
<el-table-column prop="senderName" label="发令人" />
<el-table-column prop="companyOfSender" label="发令单位" />
<el-table-column label="命令类型" width="100">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ typeObj[scope.row.type] || '' }}</span>
</template>
</el-table-column>
<el-table-column prop="content" label="命令正文" show-overflow-tooltip />
</el-table>
</div>
<div class="box-title">
<div class="contant-null" />
<div class="contant-text">发送命令</div>
<div class="contant-icon" @click="active3=!active3">
<i v-if="active3" class="el-icon-arrow-down" />
<i v-else class="el-icon-arrow-up" />
</div>
</div>
<div v-show="active3" class="left-table1">
<el-table ref="table3" :data="sendTableData" border style="width: 100%" height="150" highlight-current-row @current-change="handleCurrentChange($event, 'table3')">
<el-table-column prop="number" label="命令号" width="80" />
<el-table-column prop="title" label="命令标题" show-overflow-tooltip />
<el-table-column prop="sendTime" label="接收单位" width="160">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ JoinDeviceNameStr(scope.row.receiverInfos) || '' }}</span>
</template>
</el-table-column>
<el-table-column prop="sendTime" label="发令时间" width="160" />
<el-table-column prop="senderName" label="发令人" />
<el-table-column prop="companyOfSender" label="发令单位" />
<el-table-column label="命令类型" width="100">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ typeObj[scope.row.type] || '' }}</span>
</template>
</el-table-column>
<el-table-column prop="content" label="命令正文" show-overflow-tooltip />
</el-table>
</div>
<div class="box-title">
<div class="contant-null" />
<div class="contant-text">签收完成</div>
<div class="contant-icon" @click="active4=!active4">
<i v-if="active4" class="el-icon-arrow-down" />
<i v-else class="el-icon-arrow-up" />
</div>
</div>
<div v-show="active4" class="left-table1">
<el-table ref="table4" :data="allSignedTableData" border style="width: 100%" height="170" highlight-current-row @current-change="handleCurrentChange($event, 'table4')">
<el-table-column prop="number" label="命令号" width="80" />
<el-table-column prop="title" label="命令标题" show-overflow-tooltip />
<el-table-column prop="sendTime" label="接收单位" width="160">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ JoinDeviceNameStr(scope.row.receiverInfos) || '' }}</span>
</template>
</el-table-column>
<el-table-column prop="sendTime" label="发令时间" width="160" />
<el-table-column prop="senderName" label="发令人" />
<el-table-column prop="companyOfSender" label="发令单位" />
<el-table-column label="命令类型" width="100">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ typeObj[scope.row.type] || '' }}</span>
</template>
</el-table-column>
<el-table-column prop="content" label="命令正文" show-overflow-tooltip />
</el-table>
2022-06-30 18:13:23 +08:00
</div>
2022-06-28 11:29:38 +08:00
</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">
2022-06-29 10:36:57 +08:00
<el-tabs v-model="cmdTab" type="border-card">
2022-06-28 11:29:38 +08:00
<el-tab-pane label="调度命令" name="cmd">
2022-06-29 10:36:57 +08:00
<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="发令时间">
2022-06-30 18:13:23 +08:00
<el-date-picker v-model="command.sendTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" />
2022-06-29 10:36:57 +08:00
</el-form-item>
</el-col>
</el-row>
<el-col :span="12">
<el-form-item label="发令人">
2022-07-01 13:58:44 +08:00
<el-select v-model="command.senderName" disabled placeholder="请选择" style="width: 100%;" @change="senderChange">
2022-06-30 18:13:23 +08:00
<el-option
2022-07-01 13:58:44 +08:00
v-for="item in memberDataList"
:key="item.id"
:label="item.labelName"
:value="item.labelName"
2022-06-30 18:13:23 +08:00
/>
</el-select>
2022-06-29 10:36:57 +08:00
</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="授权时间">
2022-06-30 18:13:23 +08:00
<el-date-picker v-model="command.authorizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" />
2022-06-29 10:36:57 +08:00
</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="定稿时间">
2022-06-30 18:13:23 +08:00
<el-date-picker v-model="command.finalizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" />
2022-06-29 10:36:57 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="审核人">
2022-06-30 18:13:23 +08:00
<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>
2022-06-29 10:36:57 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="拟令人">
2022-06-30 18:13:23 +08:00
<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>
2022-06-29 10:36:57 +08:00
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="命令分类">
2022-06-30 18:13:23 +08:00
<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>
2022-06-29 10:36:57 +08:00
</el-form-item>
</el-col>
</el-form>
2022-06-28 11:29:38 +08:00
</el-tab-pane>
</el-tabs>
2022-06-29 10:36:57 +08:00
<el-tabs v-model="textTab" type="border-card">
2022-06-28 11:29:38 +08:00
<el-tab-pane label="命令正文" name="text">
<div class="cmd-box">
2022-06-29 10:36:57 +08:00
<div>
2022-07-07 15:03:41 +08:00
<el-input v-model="command.content" type="textarea" :rows="6" placeholder="请输入内容" />
2022-06-29 10:36:57 +08:00
</div>
2022-06-28 11:29:38 +08:00
</div>
</el-tab-pane>
</el-tabs>
<div>
2022-06-30 18:13:23 +08:00
<div class="table-title">
2022-06-29 10:36:57 +08:00
<span>受令列表</span>
2022-06-30 18:13:23 +08:00
<!-- <el-checkbox v-model="tableChecked">全选</el-checkbox> -->
2022-06-29 10:36:57 +08:00
</div>
<div class="table">
2022-06-30 18:13:23 +08:00
<el-table ref="table" :data="getTableData" border style="width: 100%" height="200" @selection-change="selectionChange">
2022-06-29 10:36:57 +08:00
<el-table-column type="selection" width="50" />
2022-07-07 15:03:41 +08:00
<el-table-column label="受令单位" width="160">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ getDeviceName(scope.row.receiverId) }}</span>
</template>
</el-table-column>
<el-table-column prop="copyers" label="抄送" width="120" show-overflow-tooltip />
2022-07-01 15:37:55 +08:00
<el-table-column label="签收状态">
<template slot-scope="scope">
2022-07-07 15:03:41 +08:00
<span style="margin-left: 10px">{{ signedStatusObj[scope.row.signedStatus] || '' }}</span>
</template>
</el-table-column>
<el-table-column label="签收人">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ getSignedBy(scope.row) || '' }}</span>
2022-07-01 15:37:55 +08:00
</template>
</el-table-column>
2022-07-07 15:03:41 +08:00
<el-table-column prop="time" label="签收时间" width="160" />
2022-06-29 10:36:57 +08:00
</el-table>
</div>
</div>
<div class="midle-bottom">
2022-06-30 18:13:23 +08:00
<el-button type="primary" @click="sendCmd">下达</el-button>
<el-button type="primary" @click="doClose">关闭</el-button>
2022-06-28 11:29:38 +08:00
</div>
</div>
</el-col>
<el-col :span="6">
<div class="right">
常用词汇
</div>
</el-col>
</el-row>
</div>
</el-dialog>
</template>
<script>
2022-06-30 18:13:23 +08:00
import { sendCommandNew } from '@/api/jmap/training';
import { mapState } from 'vuex';
2022-07-07 15:03:41 +08:00
import { parseTime } from '@/utils/index';
2022-06-28 11:29:38 +08:00
export default {
name:'DispatcherCmd',
data() {
return {
dialogShow: false,
activeTab: 'operate',
cmdTab: 'cmd',
2022-06-29 10:36:57 +08:00
textTab: 'text',
2022-07-07 15:03:41 +08:00
typeObj: {
NORMAL: '正常调度命令'
},
2022-07-01 15:37:55 +08:00
signedStatusObj: {
UNSIGNED: '未签收',
SIGNED: '签收',
REFUSE: '拒签'
},
2022-06-29 10:36:57 +08:00
command: {
title: '',
number: '',
sendTime: '',
senderId: '',
2022-07-01 13:58:44 +08:00
senderName: '',
2022-06-29 10:36:57 +08:00
companyOfSender: '',
authorizationTime: '',
authorizationStatus: '',
finalizationTime: '',
reviewerId: '',
author: '',
2022-06-30 18:13:23 +08:00
receiverIds: [],
2022-06-29 10:36:57 +08:00
type: '',
2022-06-30 18:13:23 +08:00
content: '',
2022-06-29 10:36:57 +08:00
allSigned: ''
},
2022-07-01 13:58:44 +08:00
tableChecked: false,
2022-07-07 15:03:41 +08:00
memberDataList: [],
active1: true,
active2: true,
active3: true,
active4: true,
numTime: 24,
seachData: [],
cacheTableData: [],
currentInfo: {}
2022-06-28 11:29:38 +08:00
};
},
computed: {
2022-06-30 18:13:23 +08:00
...mapState('training', [
2022-07-07 15:03:41 +08:00
'memberList', 'memberData', 'simulationUserList', 'initTime'
2022-06-30 18:13:23 +08:00
]),
2022-07-07 15:03:41 +08:00
typeOptions() {
const list = [];
Object.keys(this.typeObj).forEach(item => {
list.push({
label: this.typeObj[item],
value: item
});
});
return list;
},
getSimulationTime() {
const t = parseTime(this.initTime, '{h}:{i}:{s}');
const tArr = t.split(':');
let s = ' ';
let h = tArr[0];
if (this.numTime != 24) {
s = '上午';
if (h > 12) {
s = '下午';
h = h - 12;
}
}
return `${s} ${h}:${tArr[1]}:${tArr[2]}`;
},
2022-06-28 11:29:38 +08:00
show() {
return this.dialogShow;
},
2022-06-30 18:13:23 +08:00
group() {
return this.$route.query.group;
},
2022-06-28 11:29:38 +08:00
title() {
return '调度命令管理系统';
2022-06-30 18:13:23 +08:00
},
mapSimulationUserList() {
const obj = {};
this.simulationUserList.forEach(item => {
obj[item.userId] = item;
});
return obj;
},
getTableData() {
2022-07-07 15:03:41 +08:00
const mList = [];
const filterArr = this.memberList.filter(item => {
2022-06-30 18:13:23 +08:00
return item.type == 'STATION_SUPERVISOR';
});
2022-07-07 15:03:41 +08:00
filterArr.forEach(item => {
let cInfo = {};
if (this.currentInfo.receiverInfos && this.currentInfo.receiverInfos[item.deviceCode]) {
cInfo = this.currentInfo.receiverInfos[item.deviceCode];
}
mList.push({
receiverId: item.deviceCode || '',
signedBy: '',
receivedTime: '',
signedStatus: '',
time: '',
...cInfo
});
});
return mList;
},
getActiveSender() {
const userInfo = this.memberDataList.find(item => {
return item.userId == this.$store.state.user.id;
});
const activeUser = userInfo || {};
return activeUser;
},
receivedTableData() {
const list = this.seachData.filter(item => {
return item.receiverInfos[this.getActiveSender.deviceCode];
});
return list;
},
sendTableData() {
const list = this.seachData.filter(item => {
return item.senderName == this.getActiveSender.labelName;
});
return list;
},
allSignedTableData() {
const list = this.seachData.filter(item => {
return item.allSigned;
2022-06-30 18:13:23 +08:00
});
return list;
}
},
2022-07-01 13:58:44 +08:00
watch: {},
2022-06-28 11:29:38 +08:00
beforeDestroy() {},
2022-07-01 13:58:44 +08:00
mounted() {},
2022-06-28 11:29:38 +08:00
methods:{
2022-07-07 15:03:41 +08:00
setCurrentRow(obj, refName) {
const tableArr = ['table1', 'table2', 'table3', 'table4'];
tableArr.forEach(key => {
if (key != refName) {
this.$refs[key].setCurrentRow();
} else {
this.$refs[key].setCurrentRow(obj);
}
});
},
handleCurrentChange(obj, refName) {
if (!obj) { return; }
this.currentInfo = obj;
this.command = {...obj};
this.setCurrentRow(obj, refName);
const infoList = Object.keys(this.currentInfo.receiverInfos || {});
if (infoList.length) {
this.command.receiverIds = infoList;
setTimeout(() => {
infoList.forEach(item => {
const findObj = this.getTableData.find(ii => {
return ii.receiverId == item;
});
findObj && this.$refs.table.toggleRowSelection(findObj, true);
});
}, 200);
} else {
this.$refs.table.clearSelection();
}
},
getSignedBy(info) {
const signedInfo = this.simulationUserList.find(item => {
return item.memberId == info.signedBy;
});
let name = '';
if (signedInfo) {
name = signedInfo.nickName;
}
return name;
},
getDeviceName(receiverId) {
let name = '';
if (receiverId) {
const device = this.$store.getters['map/getDeviceByCode'](receiverId);
name = device ? device.name : '';
}
return name;
},
JoinDeviceNameStr(info) {
let name = '';
const devCodeArr = Object.keys(info);
const nameArr = [];
devCodeArr.forEach(ii => {
const device = this.$store.getters['map/getDeviceByCode'](ii);
nameArr.push(device ? device.name : '');
});
name = nameArr.join(',');
return name;
},
refreshSearch() {
console.log('刷新');
this.searchCmd();
},
2022-07-04 14:46:00 +08:00
createCmd() {
this.$confirm('当前调度命令已经被编辑修改过了,你要放弃所有的修改吗?', '操作提示', {
confirmButtonText: '是',
cancelButtonText: '否'
}).then(() => {
this.initData();
}).catch(() => {
console.log('取消新建调度命令!');
});
},
2022-06-30 18:13:23 +08:00
initData() {
this.command = {
title: '',
number: '',
sendTime: '',
2022-07-01 13:58:44 +08:00
senderId: '',
senderName: this.command.senderName,
2022-06-30 18:13:23 +08:00
companyOfSender: '',
authorizationTime: '',
authorizationStatus: '',
finalizationTime: '',
reviewerId: '',
author: '',
receiverIds: [],
type: '',
content: '',
allSigned: ''
};
2022-07-07 15:03:41 +08:00
this.currentInfo = {};
2022-06-30 18:13:23 +08:00
this.$refs.table.clearSelection();
2022-07-07 15:03:41 +08:00
this.setCurrentRow();
2022-06-30 18:13:23 +08:00
},
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 : '';
}
},
2022-07-01 13:58:44 +08:00
getSenderName() {
2022-07-04 09:57:24 +08:00
this.memberDataList = Object.values(this.memberData);
2022-07-01 13:58:44 +08:00
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;
}
},
2022-06-28 11:29:38 +08:00
doShow() {
2022-07-07 15:03:41 +08:00
this.searchCmd();
2022-07-01 13:58:44 +08:00
this.getSenderName();
2022-06-28 11:29:38 +08:00
this.dialogShow = true;
2022-07-07 15:03:41 +08:00
this.initData();
2022-06-28 11:29:38 +08:00
},
doClose() {
this.dialogShow = false;
},
tabClick() {
console.log('tabClick');
2022-06-30 18:13:23 +08:00
},
selectionChange(selection) {
const arr = [];
selection.forEach(item => {
2022-07-07 15:03:41 +08:00
arr.push(item.receiverId);
2022-06-30 18:13:23 +08:00
});
this.command.receiverIds = arr;
},
sendCmd() {
2022-07-07 15:03:41 +08:00
this.$confirm('你是要下达调度命令吗?', '确认提示', {
confirmButtonText: '是',
cancelButtonText: '否'
}).then(() => {
const data = {
command: this.command
};
sendCommandNew(this.group, 'CTC_SEND_DISPATCH_COMMAND', data).then((res) => {
console.log(res, '---res');
this.$message.success('发送调度命令成功!');
this.searchCmd();
this.initData();
}).catch(error => {
this.$messageBox('发送调度命令失败:' + error.message);
});
2022-06-30 18:13:23 +08:00
});
},
searchCmd() {
sendCommandNew(this.group, 'CTC_QUERY_DISPATCH_COMMAND').then((res) => {
2022-07-01 13:58:44 +08:00
console.log(res, '---res----');
2022-07-07 15:03:41 +08:00
this.seachData = res.data;
2022-06-30 18:13:23 +08:00
}).catch(error => {
2022-07-01 13:58:44 +08:00
this.$messageBox('查询调度命令失败:' + error.message);
2022-06-30 18:13:23 +08:00
});
2022-06-28 11:29:38 +08:00
}
}
};
</script>
<style lang="scss" scoped>
// .dispatcher-cmd{
// }
.main {
height: 100%;
.left {
height: 100%;
2022-07-07 15:03:41 +08:00
.operate-box {
overflow-y: auto;
}
2022-06-30 18:13:23 +08:00
.create-cmd {
2022-07-07 15:03:41 +08:00
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box-title {
height: 28px;
display: flex;
justify-content: center;
align-items: center;
background: #B3B2C2;
.contant-null, .contant-icon {
width: 20px;
display: flex;
justify-content: center;
}
.contant-icon:hover {
cursor: pointer;
}
.contant-text {
display: flex;
justify-content: center;
flex: 1;
color: blue;
}
2022-06-30 18:13:23 +08:00
}
2022-06-28 11:29:38 +08:00
}
2022-06-29 10:36:57 +08:00
/deep/ .el-tabs__item {
height: 30px !important;
line-height: 30px !important;
}
.middle {
/deep/ .el-form-item {
margin-bottom: 0px;
}
2022-06-30 18:13:23 +08:00
.el-input {
/deep/ .el-input__icon {
line-height: 22px;
}
2022-06-29 10:36:57 +08:00
}
.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;
2022-06-28 11:29:38 +08:00
}
</style>