Revert "Squashed commit of the following:"
This reverts commit 77560336
This commit is contained in:
fan
parent
5c72107b90
commit
b6edc4913b
@ -1,174 +0,0 @@
|
|||||||
|
|
||||||
import request from '@/utils/request';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取群列表
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function getGroupList(groupId) {
|
|
||||||
return request({
|
|
||||||
url: `/api/simulation/${groupId}/conversation/group/list`,
|
|
||||||
method: 'get'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 创建群
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {String} data
|
|
||||||
* @param {String} data.name 群组名称
|
|
||||||
* @param {String} data.imageUrl 群组头像
|
|
||||||
* @param {Array} data.memberIds 角色id列表
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function createGroup(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Create`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 修改群组名称
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {String} data.id 群组id
|
|
||||||
* @param {String} data.name 群组名称
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function updateGroupName(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Update_Name`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 修改群组群主
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {Number} data.id 群组id
|
|
||||||
* @param {String} data.memberId 角色id
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function updateGroupLeader(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Update_Leader`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 邀请人员入群
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {Number} data.id 群组id
|
|
||||||
* @param {Array} data.memberIds 角色id列表
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function inviteMemberToGroup(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Invite_Member`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 移除群内人员
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {Number} data.id 群组id
|
|
||||||
* @param {Array} data.memberIds 角色id列表
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function removeMemberFromGroup(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Remove_Member`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 退出群组
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {Number} data.id 群组id
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function exitGroup(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Exit`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 解散群组
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {Number} data.id 群组id
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function dissolveGroup(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Dissolve`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 发送语音信息
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {Number} data.id 群组id
|
|
||||||
* @param {String} data.audioPath 文件地址
|
|
||||||
* @param {String} data.content 语音内容
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function sendAudio(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Audio_Chat`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 发送文字信息
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {Number} data.id 群组id
|
|
||||||
* @param {String} data.content 文字内容
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function sendText(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Text_Chat`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 发送BASE64信息
|
|
||||||
* @param {String} groupId 房间号
|
|
||||||
* @param {Object} data
|
|
||||||
* @param {Number} data.id 群组id
|
|
||||||
* @param {String} data.fileBase64Str 文件base64码
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
export function sendBase64(groupId, data) {
|
|
||||||
return request({
|
|
||||||
url: `/simulation/${groupId}/operate/Conversation_Group_Audio_Base64`,
|
|
||||||
method: 'post',
|
|
||||||
data
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -512,9 +512,7 @@ export default {
|
|||||||
},
|
},
|
||||||
Conversation: {
|
Conversation: {
|
||||||
CMD_Conversation_Chat_Text: {value: 'Conversation_Chat_Text', label: '发送文本消息'},
|
CMD_Conversation_Chat_Text: {value: 'Conversation_Chat_Text', label: '发送文本消息'},
|
||||||
CMD_Conversation_Chat_Audio_Base64: {value: 'Conversation_Chat_Audio_Base64', label: '发送语音消息'},
|
CMD_Conversation_Chat_Audio_Base64: {value: 'Conversation_Chat_Audio_Base64', label: '发送语音消息'}
|
||||||
CMD_Conversation_Group_Text_Chat: {value: 'Conversation_Group_Text_Chat', label: '发送会话群文字消息'},
|
|
||||||
CMD_Conversation_Group_Audio_Base64: {value: 'Conversation_Group_Audio_Base64', label: '发送会话群语音消息'}
|
|
||||||
},
|
},
|
||||||
PSL: {
|
PSL: {
|
||||||
CMD_PSL_PRESS_BUTTON: {value: 'PSL_PRESS_BUTTON', label: 'PSL按钮操作'}
|
CMD_PSL_PRESS_BUTTON: {value: 'PSL_PRESS_BUTTON', label: 'PSL按钮操作'}
|
||||||
|
|||||||
@ -621,13 +621,6 @@ const map = {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
stationCircleList: state => {
|
|
||||||
if (state.nccData) {
|
|
||||||
return state.nccData.stationCircleList || [];
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// trainDetails: (state) => {
|
// trainDetails: (state) => {
|
||||||
// return state.trainDetails;
|
// return state.trainDetails;
|
||||||
// },
|
// },
|
||||||
@ -833,22 +826,6 @@ const map = {
|
|||||||
map.memberMap.EMERGENCY = [];
|
map.memberMap.EMERGENCY = [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!map.conversationGroupMap) {
|
|
||||||
map.conversationGroupMap = { METRO: [], RAILWAY: [], EMERGENCY: [] };
|
|
||||||
} else {
|
|
||||||
if (!map.conversationGroupMap.METRO) {
|
|
||||||
map.conversationGroupMap.METRO = [];
|
|
||||||
}
|
|
||||||
if (!map.conversationGroupMap.RAILWAY) {
|
|
||||||
map.conversationGroupMap.RAILWAY = [];
|
|
||||||
}
|
|
||||||
if (!map.conversationGroupMap.EMERGENCY) {
|
|
||||||
map.conversationGroupMap.EMERGENCY = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!map.mapClientVOList) {
|
|
||||||
map.mapClientVOList = [];
|
|
||||||
}
|
|
||||||
state.map = map;
|
state.map = map;
|
||||||
let showConfig = {};
|
let showConfig = {};
|
||||||
if (Vue.prototype.$jlmap && typeof Vue.prototype.$jlmap.getShowConfig === 'function') {
|
if (Vue.prototype.$jlmap && typeof Vue.prototype.$jlmap.getShowConfig === 'function') {
|
||||||
@ -905,10 +882,6 @@ const map = {
|
|||||||
Vue.prototype.$jlmap && Vue.prototype.$jlmap.$painter.repaint(state.mapDevice);
|
Vue.prototype.$jlmap && Vue.prototype.$jlmap.$painter.repaint(state.mapDevice);
|
||||||
Vue.prototype.$jlmap && Vue.prototype.$jlmap.setDefaultState();
|
Vue.prototype.$jlmap && Vue.prototype.$jlmap.setDefaultState();
|
||||||
},
|
},
|
||||||
updateNccDisplayConfig: (state, data) => {
|
|
||||||
const parser = parserFactory(ParserType.nccGraph.value);
|
|
||||||
parser.updateDisplayConfig(state, data);
|
|
||||||
},
|
|
||||||
updateMapDevice: (state, list) => {
|
updateMapDevice: (state, list) => {
|
||||||
list.forEach(elem => {
|
list.forEach(elem => {
|
||||||
state.mapDevice[elem.code] = deepAssign(state.mapDevice[elem.code] || {}, elem);
|
state.mapDevice[elem.code] = deepAssign(state.mapDevice[elem.code] || {}, elem);
|
||||||
@ -1341,6 +1314,7 @@ const map = {
|
|||||||
if (window.location.href.includes('/design/usermap/map/nccDraw')) {
|
if (window.location.href.includes('/design/usermap/map/nccDraw')) {
|
||||||
handleOperation(state, list);
|
handleOperation(state, list);
|
||||||
}
|
}
|
||||||
|
console.log(ParserType.nccGraph.value, '*********');
|
||||||
commit('mapRender', {devices: list, type: ParserType.nccGraph.value});
|
commit('mapRender', {devices: list, type: ParserType.nccGraph.value});
|
||||||
resolve(list);
|
resolve(list);
|
||||||
});
|
});
|
||||||
@ -1491,9 +1465,6 @@ const map = {
|
|||||||
},
|
},
|
||||||
setLinkSwitchMap: ({ commit }, linkSwitchMap) => {
|
setLinkSwitchMap: ({ commit }, linkSwitchMap) => {
|
||||||
commit('setLinkSwitchMap', linkSwitchMap);
|
commit('setLinkSwitchMap', linkSwitchMap);
|
||||||
},
|
|
||||||
updateNccDisplayConfig: ({ commit }, displayConfig) => {
|
|
||||||
commit('updateNccDisplayConfig', displayConfig);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -120,14 +120,6 @@ const socket = {
|
|||||||
conversationMessage: {},
|
conversationMessage: {},
|
||||||
controlTransfer: {},
|
controlTransfer: {},
|
||||||
operationModeApplyList: [], // 模式转换消息列表
|
operationModeApplyList: [], // 模式转换消息列表
|
||||||
conversationGroup: { // 群组
|
|
||||||
JOIN: {}, // 创建或加入群组
|
|
||||||
UPDATE_NAME: {}, // 更新名称
|
|
||||||
UPDATE_MEMBER: {}, // 更新群成员
|
|
||||||
EXIT: {}, // 退群
|
|
||||||
MESSAGE: {}, // 消息
|
|
||||||
MESSAGE_STATUS: {} // 消息状态
|
|
||||||
},
|
|
||||||
nccRunData: [] // ncc运行数据
|
nccRunData: [] // ncc运行数据
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
@ -416,17 +408,6 @@ const socket = {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
setConversationGroup: (state, message) => {
|
|
||||||
if (state.conversationGroup[message.messageType] !== undefined) {
|
|
||||||
state.conversationGroup[message.messageType] = message;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
resetConversationGroup: (state) => {
|
|
||||||
const arr = ['JOIN', 'UPDATE_NAME', 'UPDATE_MEMBER', 'EXIT', 'MESSAGE', 'MESSAGE_STATUS'];
|
|
||||||
arr.forEach(key => {
|
|
||||||
state.conversationGroup[key] = {};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleNccRun: (state, list) => {
|
handleNccRun: (state, list) => {
|
||||||
state.nccRunData = list;
|
state.nccRunData = list;
|
||||||
}
|
}
|
||||||
@ -668,12 +649,6 @@ const socket = {
|
|||||||
operationModeApply: ({ commit }, message) => {
|
operationModeApply: ({ commit }, message) => {
|
||||||
commit('operationModeApply', message);
|
commit('operationModeApply', message);
|
||||||
},
|
},
|
||||||
setConversationGroup: ({ commit }, message) => {
|
|
||||||
commit('setConversationGroup', message);
|
|
||||||
},
|
|
||||||
resetConversationGroup: ({ commit }) => {
|
|
||||||
commit('resetConversationGroup');
|
|
||||||
},
|
|
||||||
handleNccRun: ({ commit }, message) => {
|
handleNccRun: ({ commit }, message) => {
|
||||||
commit('handleNccRun', message);
|
commit('handleNccRun', message);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -107,9 +107,6 @@ function handle(data) {
|
|||||||
case 'Simulation_Member':
|
case 'Simulation_Member':
|
||||||
store.dispatch('socket/memberChangeCountIncrease');
|
store.dispatch('socket/memberChangeCountIncrease');
|
||||||
break;
|
break;
|
||||||
case 'Simulation_Conversation_Group':
|
|
||||||
store.dispatch('socket/setConversationGroup', msg);
|
|
||||||
break;
|
|
||||||
case 'Simulation_Time_Sync':
|
case 'Simulation_Time_Sync':
|
||||||
store.dispatch('socket/setSimulationTimeSync', msg);
|
store.dispatch('socket/setSimulationTimeSync', msg);
|
||||||
break;
|
break;
|
||||||
|
|||||||
@ -30,7 +30,7 @@ import TrainingTip from './trainingList/trainingTip';
|
|||||||
import TrainingPositionTip from './trainingList/trainingPositionTip.vue';
|
import TrainingPositionTip from './trainingList/trainingPositionTip.vue';
|
||||||
import TrainingMenu from './trainingList/trainingMenu';
|
import TrainingMenu from './trainingList/trainingMenu';
|
||||||
import TrainingDesign from './trainingDesign/designPane.vue';
|
import TrainingDesign from './trainingDesign/designPane.vue';
|
||||||
import ChatBox from './newChat/index.vue';
|
import ChatBox from './chatBox';
|
||||||
import TrainingLeftSlider from './trainingList/trainingLeftSlider';
|
import TrainingLeftSlider from './trainingList/trainingLeftSlider';
|
||||||
import LineBoard from './lineBoard';
|
import LineBoard from './lineBoard';
|
||||||
import BottomTable from './bottomTable';
|
import BottomTable from './bottomTable';
|
||||||
|
|||||||
@ -1,528 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="voice-chat-box">
|
|
||||||
<div class="chat-box-main">
|
|
||||||
<div class="chat-box-content">
|
|
||||||
<div v-for="(content,index) in messageList" :key="index" class="eachChatContent">
|
|
||||||
<div :class="content.memberId == myMemberId?'rightUser':'leftUser'">
|
|
||||||
<div class="userHeader">
|
|
||||||
<div class="userName">{{ covertName(content.memberId) }}</div>
|
|
||||||
<div :class="content.memberId == myMemberId?'userChatTime textRight':'userChatTime'">{{ content.time }}</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="content.type === 'Text'" class="userBubble">
|
|
||||||
<div class="userMessage">
|
|
||||||
<span class="messageText">{{ content.content }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="userBubble" style="height: 30px;width: 140px;" @click="playAudio(content.audioPath, content)">
|
|
||||||
<div class="userMessage">
|
|
||||||
<div class="wifi-symbol">
|
|
||||||
<div class="wifi-circle first" />
|
|
||||||
<div class="wifi-circle second" :class="{'second-amit': content.activeAuto}" />
|
|
||||||
<div class="wifi-circle third" :class="{'third-amit': content.activeAuto}" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chat-box-footer">
|
|
||||||
<el-input v-model="textContent" size="small" placeholder="请输入会话文字，点击T发送" style="flex: 1; margin-left: 5px;" :rows="1" />
|
|
||||||
<el-button :id="sendTextId" size="mini" class="chat-box-footer-create" :disabled="contentSend || !id" @click="sendText">T</el-button>
|
|
||||||
<el-button :id="recordVoice" class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" :disabled="audioPlay || (trainingDesign && !trainingSwitch) || !id" size="mini" type="primary" @click="startRecording()">
|
|
||||||
<el-progress id="voice_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
|
|
||||||
<i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancelRecording()" />
|
|
||||||
<span class="iconfont icon-yuyin"></span>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<audio id="audioPlay" style="display:none" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import RecordRTC from 'recordrtc';
|
|
||||||
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
|
|
||||||
import {UserOperationType} from '@/scripts/ConstDic';
|
|
||||||
import CMD from '@/scripts/cmdPlugin/CommandEnum';
|
|
||||||
export default {
|
|
||||||
name: 'ChatBox',
|
|
||||||
props:{
|
|
||||||
messageList:{
|
|
||||||
type:Array,
|
|
||||||
required:true
|
|
||||||
},
|
|
||||||
id:{
|
|
||||||
type:Number,
|
|
||||||
required:true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
recordSending:false,
|
|
||||||
seconds:0,
|
|
||||||
inter:null,
|
|
||||||
recorders: null,
|
|
||||||
microphone:null,
|
|
||||||
audioPlay:false,
|
|
||||||
textContent: '',
|
|
||||||
currentAudioList:[],
|
|
||||||
currentMessage: {},
|
|
||||||
trainingDesign: false,
|
|
||||||
contentDom: '',
|
|
||||||
isBottom: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
group() {
|
|
||||||
return this.$route.query.group;
|
|
||||||
},
|
|
||||||
contentSend() {
|
|
||||||
return !this.textContent;
|
|
||||||
},
|
|
||||||
myMemberId() {
|
|
||||||
return this.$store.state.training.myMemberId;
|
|
||||||
},
|
|
||||||
userId() {
|
|
||||||
return this.$store.state.user.id;
|
|
||||||
},
|
|
||||||
sendTextId() {
|
|
||||||
return OperationEvent.Conversation.Chat.menu.domId;
|
|
||||||
},
|
|
||||||
recordVoice() {
|
|
||||||
return OperationEvent.Conversation.Chat.record.domId;
|
|
||||||
},
|
|
||||||
sideButtonDom() {
|
|
||||||
return OperationEvent.Conversation.Chat.sideButton;
|
|
||||||
},
|
|
||||||
trainingSwitch() {
|
|
||||||
return this.$store.state.trainingNew.trainingSwitch;
|
|
||||||
},
|
|
||||||
lastMessage() {
|
|
||||||
return this.messageList[this.messageList.length - 1];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
'$store.state.training.domConfig': function(val) {
|
|
||||||
this.trainingDesign = val.trainingDesign;
|
|
||||||
},
|
|
||||||
lastMessage(newVal, oldVal) {
|
|
||||||
if (newVal !== oldVal && this.isBottom) {
|
|
||||||
this.scrollTop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.trainingDesign = this.$store.state.training.domConfig ? this.$store.state.training.domConfig.trainingDesign : false;
|
|
||||||
this.contentDom = document.querySelector('.chat-box-content');
|
|
||||||
this.contentDom.onscroll = () => {
|
|
||||||
this.setIsBottomFn();
|
|
||||||
};
|
|
||||||
this.isBottom = true;
|
|
||||||
this.scrollTop();
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.contentDom.onscroll = null;
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setIsBottomFn() {
|
|
||||||
const scrollTop = this.contentDom.scrollHeight - this.contentDom.clientHeight;
|
|
||||||
if (scrollTop == 0 || this.contentDom.scrollTop >= scrollTop) {
|
|
||||||
this.isBottom = true;
|
|
||||||
} else {
|
|
||||||
this.isBottom = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scrollTop() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
// const scrollTop = this.messageList.length * 62;
|
|
||||||
const scrollTop = this.contentDom.scrollHeight - this.contentDom.clientHeight;
|
|
||||||
this.contentDom.scrollTop = scrollTop;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
playAllAudio() {
|
|
||||||
this.$nextTick(function() {
|
|
||||||
this.currentMessage = this.currentAudioList.shift();
|
|
||||||
if (this.currentMessage.type === 'Text') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
document.querySelector('#audioPlay').src = this.currentMessage.audioPath;
|
|
||||||
document.querySelector('#audioPlay').play();
|
|
||||||
this.$set(this.currentMessage, 'activeAuto', true);
|
|
||||||
this.play = true;
|
|
||||||
document.querySelector('#audioPlay').onended = () => {
|
|
||||||
this.$set(this.currentMessage, 'activeAuto', false);
|
|
||||||
if (!this.currentAudioList || !this.currentAudioList.length) {
|
|
||||||
this.play = false;
|
|
||||||
} else {
|
|
||||||
this.playAllAudio();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
playAudio(audioPath, data) {
|
|
||||||
this.$set(this.currentMessage, 'activeAuto', false);
|
|
||||||
this.currentAudioList = [];
|
|
||||||
this.currentMessage = data;
|
|
||||||
this.play = true;
|
|
||||||
document.querySelector('#audioPlay').src = audioPath;
|
|
||||||
document.querySelector('#audioPlay').play();
|
|
||||||
this.$set(this.currentMessage, 'activeAuto', true);
|
|
||||||
document.querySelector('#audioPlay').onended = () => { this.play = false; this.$set(this.currentMessage, 'activeAuto', false); };
|
|
||||||
},
|
|
||||||
covertName(memberId) {
|
|
||||||
let name = '';
|
|
||||||
const member = this.$store.state.training.memberData[memberId];
|
|
||||||
if (member && member.userId) {
|
|
||||||
const user = this.$store.state.training.simulationUserList.find(user => user.userId == member.userId);
|
|
||||||
name = member.labelName + '(' + user.nickName + ')';
|
|
||||||
} else if (member) {
|
|
||||||
name = member.labelName;
|
|
||||||
}
|
|
||||||
return name;
|
|
||||||
},
|
|
||||||
sendText() {
|
|
||||||
if (!this.id) { return; }
|
|
||||||
const operate = {
|
|
||||||
over: true,
|
|
||||||
cmdType: CMD.Conversation.CMD_Conversation_Group_Text_Chat,
|
|
||||||
operation: OperationEvent.Conversation.Chat.menu.operation,
|
|
||||||
userOperationType: UserOperationType.LEFTCLICK,
|
|
||||||
param: {
|
|
||||||
id: this.id,
|
|
||||||
content:this.textContent
|
|
||||||
}
|
|
||||||
};
|
|
||||||
this.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
|
|
||||||
if (valid) {
|
|
||||||
this.textContent = '';
|
|
||||||
}
|
|
||||||
}).catch(error => {
|
|
||||||
this.$message.error('发送会话文字失败：' + error.message);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
cancelRecording() {
|
|
||||||
if (this.microphone) {
|
|
||||||
clearInterval(this.inter);
|
|
||||||
this.seconds = 0;
|
|
||||||
this.microphone.stop();
|
|
||||||
this.microphone = null;
|
|
||||||
this.recordSending = false;
|
|
||||||
this.recorders = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 停止录制 发送语音
|
|
||||||
stopRecording() {
|
|
||||||
this.audioPlay = true;
|
|
||||||
clearInterval(this.inter);
|
|
||||||
this.seconds = 0;
|
|
||||||
const that = this;
|
|
||||||
this.recorders.stopRecording(function(blobURL) {
|
|
||||||
that.recorders.getDataURL(function(BaseURL) {
|
|
||||||
const operate = {
|
|
||||||
over: true,
|
|
||||||
cmdType: CMD.Conversation.CMD_Conversation_Group_Audio_Base64,
|
|
||||||
operation: OperationEvent.Conversation.Chat.record.operation,
|
|
||||||
userOperationType: UserOperationType.LEFTCLICK,
|
|
||||||
param: {
|
|
||||||
id: that.id,
|
|
||||||
fileBase64Str: BaseURL
|
|
||||||
}
|
|
||||||
};
|
|
||||||
that.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
|
|
||||||
if (valid) {
|
|
||||||
that.textContent = '';
|
|
||||||
that.audioPlay = false;
|
|
||||||
}
|
|
||||||
}).catch(error => {
|
|
||||||
that.$message.error('发送会话语音失败：' + error.message);
|
|
||||||
that.audioPlay = false;
|
|
||||||
});
|
|
||||||
if (that.microphone) {
|
|
||||||
that.microphone.stop();
|
|
||||||
that.microphone = null;
|
|
||||||
that.recordSending = false;
|
|
||||||
that.recorders = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
tipErrorMessage(error) {
|
|
||||||
switch (error.code || error.name) {
|
|
||||||
case 'PERMISSION_DENIED':
|
|
||||||
case 'PermissionDeniedError':
|
|
||||||
this.$message({
|
|
||||||
showClose: true,
|
|
||||||
message: '用户拒绝提供信息',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'NOT_SUPPORTED_ERROR':
|
|
||||||
case 'NotSupportedError':
|
|
||||||
this.$message({
|
|
||||||
showClose: true,
|
|
||||||
message: '浏览器不支持硬件设备',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'MANDATORY_UNSATISFIED_ERROR':
|
|
||||||
case 'MandatoryUnsatisfiedError':
|
|
||||||
this.$message({
|
|
||||||
showClose: true,
|
|
||||||
message: '无法发现指定的硬件设备',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
this.$message({
|
|
||||||
showClose: true,
|
|
||||||
message: '无法打开麦克风',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mediaSuccessCallback(stream) {
|
|
||||||
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
|
|
||||||
this.microphone = stream;
|
|
||||||
this.recorders = new RecordRTC(this.microphone, {
|
|
||||||
type: 'audio',
|
|
||||||
recorderType: StereoAudioRecorder,
|
|
||||||
numberOfAudioChannels: 1,
|
|
||||||
bitsPerSecond:256000,
|
|
||||||
desiredSampRate: 16000
|
|
||||||
});
|
|
||||||
this.recorders.startRecording();
|
|
||||||
this.recordSending = true;
|
|
||||||
this.audioPlay = false;
|
|
||||||
this.inter = setInterval(() => {
|
|
||||||
if (this.seconds < 60) {
|
|
||||||
this.seconds++;
|
|
||||||
} else {
|
|
||||||
clearInterval(this.inter);
|
|
||||||
this.stopRecording();
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
},
|
|
||||||
// 语音录制开始
|
|
||||||
startRecording() {
|
|
||||||
if (!this.recordSending) {
|
|
||||||
const operate = {
|
|
||||||
operation: OperationEvent.Conversation.Chat.record.operation,
|
|
||||||
userOperationType: UserOperationType.LEFTCLICK
|
|
||||||
};
|
|
||||||
this.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
|
|
||||||
if (valid) {
|
|
||||||
this.audioPlay = true;
|
|
||||||
const that = this;
|
|
||||||
if (!this.recordSending && !this.recorders && !this.microphone) {
|
|
||||||
navigator.getUserMedia(
|
|
||||||
{ audio: true } // 只启用音频
|
|
||||||
, function (stream) {
|
|
||||||
that.mediaSuccessCallback(stream);
|
|
||||||
}, function (error) {
|
|
||||||
that.audioPlay = false;
|
|
||||||
that.tipErrorMessage(error);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).catch(() => { console.error('操作失败！'); });
|
|
||||||
} else {
|
|
||||||
this.stopRecording(); // 发送语音
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.voice-chat-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.chat-box-content{
|
|
||||||
height: calc(100% - 55px);
|
|
||||||
position: relative;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
|
||||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
|
||||||
.chat-box-content::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
// height: 110px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
/*定义滚动条轨道 内阴影+圆角*/
|
|
||||||
.chat-box-content::-webkit-scrollbar-track {
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #FFFFFF;;
|
|
||||||
}
|
|
||||||
/*定义滑块 内阴影+圆角*/
|
|
||||||
.chat-box-content::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 10px;
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
|
||||||
background-color: #cacaca;
|
|
||||||
}
|
|
||||||
/*滑块效果*/
|
|
||||||
.chat-box-content::-webkit-scrollbar-thumb:hover {
|
|
||||||
border-radius: 5px;
|
|
||||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
||||||
background: rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
.chat-box-footer{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 55px;
|
|
||||||
border-top: 1px solid #afafaf;
|
|
||||||
}
|
|
||||||
.chat-box-main{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-left: 1px solid #dedede;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
.chat-box-footer-create{
|
|
||||||
font-size: 16px;
|
|
||||||
color: #fff;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: green;
|
|
||||||
border: none;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.chat-box-footer-send{
|
|
||||||
position: relative;
|
|
||||||
background: #F2F2F2;
|
|
||||||
cursor: pointer;
|
|
||||||
.icon-yuyin{
|
|
||||||
color: #333;
|
|
||||||
font-size: 24px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
&.active{
|
|
||||||
.icon-yuyin{
|
|
||||||
color: green;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.close_icon{
|
|
||||||
position: absolute;
|
|
||||||
top: -15px;
|
|
||||||
left: 11px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#voice_progress_bar{
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.eachChatContent{width: 100%;min-height: 65px;display:inline-block;}
|
|
||||||
.chat-box-footer-send.disbled{
|
|
||||||
cursor: no-drop;
|
|
||||||
}
|
|
||||||
.leftUser{
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
// display: inline-block;
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
.rightUser{
|
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
// display: inline-block;
|
|
||||||
max-width: 80%;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.userHeader{margin-bottom: 2px;}
|
|
||||||
.userName{font-size: 12px;display:inline-block;margin-right:10px;}
|
|
||||||
.userChatTime{font-size: 12px;display:inline-block;}
|
|
||||||
.textRight{text-align: right;}
|
|
||||||
.userBubble{
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 5px 10px 6px 10px;
|
|
||||||
min-width: 140px;
|
|
||||||
background: #ccc;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
display:inline-block;
|
|
||||||
}
|
|
||||||
.userMessage{
|
|
||||||
position: relative;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.messageText{
|
|
||||||
line-height: 20px;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
.wifi-symbol {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: hidden;
|
|
||||||
transform: rotate(135deg);
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: -13px;
|
|
||||||
}
|
|
||||||
.wifi-circle {
|
|
||||||
border: 1px solid #000000;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.first {
|
|
||||||
width: 9px;
|
|
||||||
height: 9px;
|
|
||||||
background: #cccccc;
|
|
||||||
top: 45px;
|
|
||||||
left: 45px;
|
|
||||||
border: 2px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.second {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
top: 40px;
|
|
||||||
left: 40px;
|
|
||||||
&.second-amit{
|
|
||||||
animation: fadeInOut 1s infinite 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.third {
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
top: 36px;
|
|
||||||
left: 36px;
|
|
||||||
&.third-amit{
|
|
||||||
animation: fadeInOut 1s infinite 0.4s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInOut {
|
|
||||||
0% {
|
|
||||||
opacity: 0; /*初始状态 透明度为0*/
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1; /*结尾状态 透明度为1*/
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,467 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog
|
|
||||||
v-dialogDrag
|
|
||||||
class="chatDialog"
|
|
||||||
:visible.sync="dialogVisible"
|
|
||||||
width="50%"
|
|
||||||
:modal="false"
|
|
||||||
:show-close="false"
|
|
||||||
append-to-body
|
|
||||||
:close-on-click-modal="false"
|
|
||||||
:before-close="handleClose"
|
|
||||||
>
|
|
||||||
<div slot="title" class="dialogHeader">
|
|
||||||
<div class="icon">
|
|
||||||
<i class="el-icon-minus pointer" @click="handleClose" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialogBody">
|
|
||||||
<div v-show="false" class="leftBox">
|
|
||||||
<div class="leftLogo">
|
|
||||||
<img :src="logoImgUrl" :alt="logoImgUrl">
|
|
||||||
</div>
|
|
||||||
<div v-for="(item, index) in tabs" :key="index" class="tab pointer" :class="{active: index === tabActive}" @click="tabsClick(index)">
|
|
||||||
<i :class="item.icon" />
|
|
||||||
<div class="tabLabel">{{ item.label }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="tabActive==0" class="content">
|
|
||||||
<div class="middle">
|
|
||||||
<div class="middleTop">
|
|
||||||
<div v-for="(item, index) in filterTab" :key="index" class="filterType pointer" :class="{active: index === filterActive}" @click="filterClick(index)">
|
|
||||||
<div class="filterLabel">{{ item.label }}</div>
|
|
||||||
<div class="activeLine" />
|
|
||||||
</div>
|
|
||||||
<div class="nullDiv" />
|
|
||||||
<div class="editFilter pointer">
|
|
||||||
<i class="el-icon-plus" title="创建会话群" @click="createGroup" />
|
|
||||||
<!-- <i class="el-icon-more" /> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="middleMain">
|
|
||||||
<div v-for="(item, index) in groupList" :key="index" class="row pointer" :class="{active: item.id === id}" @click="groupClick(item)">
|
|
||||||
<div v-show="item.imageUrl" class="groupIcon"><img :src="getImgUrl(item.imageUrl)" alt=""></div>
|
|
||||||
<div class="groupInfo">
|
|
||||||
<div class="text"><b>{{ item.name }}</b></div>
|
|
||||||
<div class="text">{{ getLastMsg(item.messageList) }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="groupMarke">
|
|
||||||
<div class="time">{{ getLastTime(item.messageList) }}</div>
|
|
||||||
<i v-if="item.isMute" class="el-icon-close-notification" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<!-- <div v-for="(item, index) in activeMessageList" :key="index">
|
|
||||||
<span>{{ item.time }}</span>
|
|
||||||
<span>{{ item.content }}</span>
|
|
||||||
</div>
|
|
||||||
<el-input v-model="inputMsg" />
|
|
||||||
<el-button @click="sendMsg">发送</el-button> -->
|
|
||||||
<chat-content :id="id" :message-list="activeMessageList" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="tabActive==1">文档</div>
|
|
||||||
<div v-else-if="tabActive==2">工作台</div>
|
|
||||||
<div v-else-if="tabActive==3">通讯录</div>
|
|
||||||
</div>
|
|
||||||
<EditGroup ref="editGroup" @createGroup="getGroupList" />
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {mapGetters} from 'vuex';
|
|
||||||
import { getGroupList, sendText } from '@/api/newChat';
|
|
||||||
import { timestampFormat } from '@/utils/date';
|
|
||||||
import ChatContent from './chatContent';
|
|
||||||
import EditGroup from './editGroup';
|
|
||||||
export default {
|
|
||||||
name: '',
|
|
||||||
components: {
|
|
||||||
ChatContent,
|
|
||||||
EditGroup
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
inputMsg: '',
|
|
||||||
logoImgUrl: '',
|
|
||||||
dialogVisible: false,
|
|
||||||
tabs: [
|
|
||||||
{label:'消息', icon:'el-icon-chat-dot-square'},
|
|
||||||
{label:'文档', icon:'el-icon-document'},
|
|
||||||
{label:'工作台', icon:'el-icon-menu'},
|
|
||||||
{label:'通讯录', icon:'el-icon-notebook-1'}
|
|
||||||
],
|
|
||||||
tabActive: 0,
|
|
||||||
filterTab: [
|
|
||||||
{label: '全部', value: ''}
|
|
||||||
// {label: '未读', value: ''},
|
|
||||||
// {label: '@我', value: ''},
|
|
||||||
// {label: '单聊', value: ''},
|
|
||||||
// {label: '群聊', value: ''}
|
|
||||||
],
|
|
||||||
filterActive: 0,
|
|
||||||
groupList: [
|
|
||||||
// {name: '分公司领导', imageUrl: '', memberList:[], messageList: [{content: '控制中心消息：【I 类】', time: '2023-04-20 15:08:55'}]},
|
|
||||||
// {name: '集团公司', imageUrl: '', memberList:[],messageList: [{content: '【演练结束】2号线二期：14:58 Y04列车演练结束', time: '2023-04-20 15:08:55'}], isMute: true}
|
|
||||||
],
|
|
||||||
id: 0 // 当前的群组id
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters('projectConfig', ['loginProLogo']),
|
|
||||||
groupId() {
|
|
||||||
return this.$route.query.group;
|
|
||||||
},
|
|
||||||
myMemberId() {
|
|
||||||
return this.$store.state.training.myMemberId;
|
|
||||||
},
|
|
||||||
activeMessageList() {
|
|
||||||
let list = [];
|
|
||||||
const find = this.groupList.find(item => {
|
|
||||||
return item.id == this.id;
|
|
||||||
});
|
|
||||||
if (find) {
|
|
||||||
list = find.messageList;
|
|
||||||
}
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
'$store.state.socket.simulationReset': function (val) { // 仿真重置
|
|
||||||
if (val) {
|
|
||||||
this.$store.dispatch('socket/resetConversationGroup');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'$store.state.socket.conversationGroup.MESSAGE': function(val) {
|
|
||||||
const find = this.groupList.find(item => {
|
|
||||||
return item.id == val.id;
|
|
||||||
});
|
|
||||||
if (find) {
|
|
||||||
find.messageList.push(val.message);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'$store.state.socket.conversationGroup.MESSAGE_STATUS': function(val) {
|
|
||||||
const find = this.groupList.find(item => {
|
|
||||||
return item.id == val.id;
|
|
||||||
});
|
|
||||||
if (find) {
|
|
||||||
const index = find.messageList.findIndex(item => {
|
|
||||||
return item.id == val.message.id;
|
|
||||||
});
|
|
||||||
if (index > -1) {
|
|
||||||
const obj = {
|
|
||||||
...find.messageList[index],
|
|
||||||
...val.message
|
|
||||||
};
|
|
||||||
find.messageList.splice(index, 1, obj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
myMemberId() {
|
|
||||||
this.getGroupList();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getBaseInfo();
|
|
||||||
this.getGroupList();
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.handleClose();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getMessageStatus(val) {
|
|
||||||
const find = this.groupList.find(item => {
|
|
||||||
return item.id == val.id;
|
|
||||||
});
|
|
||||||
if (find) {
|
|
||||||
const index = find.messageList.findIndex(item => {
|
|
||||||
return item.id == val.message.id;
|
|
||||||
});
|
|
||||||
if (index > -1) {
|
|
||||||
const obj = {
|
|
||||||
...find.messageList[index],
|
|
||||||
...val.message
|
|
||||||
};
|
|
||||||
find.messageList.splice(index, 1, obj);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getBadge(messageList) {
|
|
||||||
const filter = messageList.filter(item => {
|
|
||||||
return !item.allRead && !item.readerSet.includes(this.myMemberId) && this.myMemberId != item.memberId;
|
|
||||||
});
|
|
||||||
return filter.length;
|
|
||||||
},
|
|
||||||
getGroupName(item) {
|
|
||||||
let name = '';
|
|
||||||
if (item.name) {
|
|
||||||
name = item.name;
|
|
||||||
} else {
|
|
||||||
const nArr = [];
|
|
||||||
item.memberList.forEach(ii => {
|
|
||||||
const node = this.memberData[ii.memberId];
|
|
||||||
node && nArr.push(node.labelName);
|
|
||||||
});
|
|
||||||
name = nArr.join('、');
|
|
||||||
}
|
|
||||||
return name;
|
|
||||||
},
|
|
||||||
createGroup() {
|
|
||||||
this.$refs.editGroup.doShow();
|
|
||||||
},
|
|
||||||
sendMsg() {
|
|
||||||
sendText(this.groupId, {id: this.id, content:this.inputMsg}).then(res => {
|
|
||||||
console.log(res, '--res--');
|
|
||||||
this.inputMsg = '';
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err, '--err--');
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getLastMsg(list) {
|
|
||||||
let msg = '';
|
|
||||||
if (list.length) {
|
|
||||||
const last = list[list.length - 1];
|
|
||||||
if (last.type == 'Text') {
|
|
||||||
msg = last.content;
|
|
||||||
} else if (last.type == 'Voice') {
|
|
||||||
msg = '[语音]';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return msg;
|
|
||||||
},
|
|
||||||
getLastTime(list) {
|
|
||||||
let time = '';
|
|
||||||
if (list.length) {
|
|
||||||
time = list[list.length - 1].time;
|
|
||||||
}
|
|
||||||
return this.timeFormat(time);
|
|
||||||
},
|
|
||||||
timeFormat(time) {
|
|
||||||
let timeStr = '';
|
|
||||||
if (time) {
|
|
||||||
const t = new Date(time).getTime();
|
|
||||||
const todayTime = new Date(new Date().toLocaleDateString()).getTime();
|
|
||||||
const tomorrow = todayTime + 24 * 3600 * 1000;
|
|
||||||
const yesterday = todayTime - 24 * 3600 * 1000;
|
|
||||||
if (t >= tomorrow) {
|
|
||||||
timeStr = timestampFormat('MM-DD', time);
|
|
||||||
} else if (tomorrow > t && t >= todayTime) {
|
|
||||||
timeStr = timestampFormat('HH:mm', time);
|
|
||||||
} else if (todayTime > t && t >= yesterday) {
|
|
||||||
timeStr = '昨天';
|
|
||||||
} else if (yesterday > t) {
|
|
||||||
timeStr = timestampFormat('MM-DD', time);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return timeStr;
|
|
||||||
},
|
|
||||||
getGroupList() {
|
|
||||||
getGroupList(this.groupId).then(res => {
|
|
||||||
console.log(res, '---res--');
|
|
||||||
this.groupList = res.data;
|
|
||||||
if (this.groupList && this.groupList[0]) {
|
|
||||||
this.id = this.groupList[0].id;
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err, '---获取群组列表失败--');
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getImgUrl(url) {
|
|
||||||
return url ? this.$store.state.user.ossUrl + '/conversationGroup/' + url : '';
|
|
||||||
},
|
|
||||||
getBaseInfo() {
|
|
||||||
this.logoImgUrl = this.$store.state.user.ossUrl + '/logo/' + this.loginProLogo;
|
|
||||||
},
|
|
||||||
tabsClick(index) {
|
|
||||||
this.tabActive = index;
|
|
||||||
},
|
|
||||||
filterClick(index) {
|
|
||||||
this.filterActive = index;
|
|
||||||
},
|
|
||||||
groupClick(item) {
|
|
||||||
this.id = item.id;
|
|
||||||
},
|
|
||||||
handleClose() {
|
|
||||||
this.$store.dispatch('training/setChatBoxMin', true);
|
|
||||||
this.dialogVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss'>
|
|
||||||
.chatDialog{
|
|
||||||
pointer-events: none !important;
|
|
||||||
.el-dialog__header,
|
|
||||||
.el-dialog__body {
|
|
||||||
padding: 0px;
|
|
||||||
pointer-events: all !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
.chatDialog {
|
|
||||||
.pointer {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.dialogHeader {
|
|
||||||
padding: 5px 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
background: #0076F6;
|
|
||||||
.icon {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialogBody {
|
|
||||||
display: flex;
|
|
||||||
height: 600px;
|
|
||||||
.leftBox {
|
|
||||||
background: #ddd;
|
|
||||||
width: 70px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
.leftLogo {
|
|
||||||
width: 53px;
|
|
||||||
height: 53px;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 5px 0;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tab {
|
|
||||||
width: 53px;
|
|
||||||
height: 53px;
|
|
||||||
margin: 5px 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 5px;
|
|
||||||
&:hover {
|
|
||||||
background: #ccc;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
.tabLabel {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
background: #aaa;
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
.middle {
|
|
||||||
width: 280px;
|
|
||||||
padding: 5px;
|
|
||||||
.middleTop {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 3px;
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
.filterType {
|
|
||||||
padding: 3px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
.filterLabel {
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
.activeLine {
|
|
||||||
width: 60%;
|
|
||||||
height: 1px;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
.filterLabel {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.activeLine {
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nullDiv {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.middleMain {
|
|
||||||
overflow-y: auto;
|
|
||||||
height: calc(100% - 40px);
|
|
||||||
.row {
|
|
||||||
padding: 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 5px;
|
|
||||||
&:hover {
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
.groupIcon {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.groupInfo {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
.text {
|
|
||||||
height: 22px;
|
|
||||||
padding: 3px 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.groupMarke {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
.time, i {
|
|
||||||
padding: 3px 0px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.time {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
background: #ccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
flex: 1;
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,570 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-dialog
|
|
||||||
v-dialogDrag
|
|
||||||
class="editGroup"
|
|
||||||
title="创建会话群"
|
|
||||||
:visible.sync="dialogVisible"
|
|
||||||
width="40%"
|
|
||||||
:modal="false"
|
|
||||||
append-to-body
|
|
||||||
:close-on-click-modal="false"
|
|
||||||
:before-close="handleClose"
|
|
||||||
>
|
|
||||||
<el-row class="body">
|
|
||||||
<el-col :span="12" class="left">
|
|
||||||
<div class="searchBox">
|
|
||||||
<el-input v-model="queryMember" placeholder="请输入搜索人员" clearable>
|
|
||||||
<el-button slot="append" icon="el-icon-search" />
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="treeBox">
|
|
||||||
<el-tree
|
|
||||||
ref="tree"
|
|
||||||
:data="treeData"
|
|
||||||
node-key="id"
|
|
||||||
:props="defaultProps"
|
|
||||||
default-expand-all
|
|
||||||
:default-checked-keys="defaultCheckedKeys"
|
|
||||||
show-checkbox
|
|
||||||
:filter-node-method="filterNode"
|
|
||||||
@check="checkChange"
|
|
||||||
>
|
|
||||||
<span slot-scope="{ data }" class="custom-tree-node">
|
|
||||||
<span>{{ data.labelName }}</span>
|
|
||||||
</span>
|
|
||||||
</el-tree>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="right">
|
|
||||||
<div class="right">
|
|
||||||
<b>已选择（</b>
|
|
||||||
<b>{{ selectTreeNode.length }}</b>
|
|
||||||
<b>）</b>
|
|
||||||
<div class="tagBox">
|
|
||||||
<el-tag v-for="(tag, index) in selectTreeNode" :key="index" class="tag" :class="{disableClose: tag.disabled}" :type="tag.disabled ? 'warning' : ''" closable @close="tagClose(tag)">
|
|
||||||
{{ tag.labelName }}
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
<el-divider />
|
|
||||||
<el-form ref="form" :model="form" label-width="80px">
|
|
||||||
<el-form-item label="群名称：">
|
|
||||||
<el-input v-model="form.name" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="群头像：">
|
|
||||||
<div class="uploadImgDiv">
|
|
||||||
<img v-if="form.imageUrl" :src="getImgUrl(form.imageUrl)" :alt="getImgUrl(form.imageUrl)">
|
|
||||||
<i class="el-icon-plus" />
|
|
||||||
<input id="upload_file_group" ref="files" type="file" class="input_file_box" accept="image/jpeg,image/png" @change="uploadLogo()">
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button @click="handleClose">取消</el-button>
|
|
||||||
<el-button type="primary" @click="onSubmit">确定</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { createGroup } from '@/api/newChat';
|
|
||||||
import { getUploadUrl } from '@/api/projectConfig';
|
|
||||||
export default {
|
|
||||||
name: 'EditGroup',
|
|
||||||
components: {
|
|
||||||
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialogVisible: false,
|
|
||||||
queryMember: '',
|
|
||||||
defaultProps: {
|
|
||||||
children: 'children',
|
|
||||||
label: 'labelName'
|
|
||||||
},
|
|
||||||
activeTrains: [],
|
|
||||||
selectTreeNode: [],
|
|
||||||
treeData: [{
|
|
||||||
labelName: '行调',
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
labelName: '车站值班员',
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
labelName: '司机',
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
labelName: '通号',
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
labelName: '车辆段',
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
labelName: 'CTC操作员',
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
labelName: '车站助理',
|
|
||||||
children: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站站长',
|
|
||||||
children: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站信号员',
|
|
||||||
children: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站客运员',
|
|
||||||
children: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站扳道员',
|
|
||||||
children: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站引导员',
|
|
||||||
children: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站工务工',
|
|
||||||
children: []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '设备管理员',
|
|
||||||
children: []
|
|
||||||
}
|
|
||||||
],
|
|
||||||
form: {
|
|
||||||
name: '',
|
|
||||||
imageUrl: ''
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
groupId() {
|
|
||||||
return this.$route.query.group;
|
|
||||||
},
|
|
||||||
memberList() {
|
|
||||||
return this.$store.state.training.memberList;
|
|
||||||
},
|
|
||||||
memberData() {
|
|
||||||
return this.$store.state.training.memberData;
|
|
||||||
},
|
|
||||||
userId() {
|
|
||||||
return this.$store.state.user.id;
|
|
||||||
},
|
|
||||||
defaultCheckedKeys() {
|
|
||||||
const list = [];
|
|
||||||
const find = this.memberList.find(item => {
|
|
||||||
return item.userId == this.userId;
|
|
||||||
});
|
|
||||||
if (find) {
|
|
||||||
list.push(find.id);
|
|
||||||
}
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
queryMember(val) {
|
|
||||||
this.$refs.tree.filter(val);
|
|
||||||
},
|
|
||||||
memberList () {
|
|
||||||
this.getTreeData();
|
|
||||||
},
|
|
||||||
'$store.state.map.activeTrainListChange': function () {
|
|
||||||
this.getActiveTrains();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.defaultCheckedKeys.forEach(id => {
|
|
||||||
const node = this.memberData[id];
|
|
||||||
node && this.selectTreeNode.push(node);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getTreeData();
|
|
||||||
this.getActiveTrains();
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getImgUrl(url) {
|
|
||||||
return url ? this.$store.state.user.ossUrl + '/conversationGroup/' + url : '';
|
|
||||||
},
|
|
||||||
tagClose(item) {
|
|
||||||
if (item.disabled) { return; }
|
|
||||||
const filter = this.selectTreeNode.filter(ii => {
|
|
||||||
return item != ii;
|
|
||||||
});
|
|
||||||
this.$refs.tree.setCheckedNodes(filter);
|
|
||||||
this.selectTreeNode = filter;
|
|
||||||
},
|
|
||||||
getActiveTrains() {
|
|
||||||
this.activeTrains = [];
|
|
||||||
const activeTrainList = this.$store.state.map.activeTrainList;
|
|
||||||
if (activeTrainList && activeTrainList.length) {
|
|
||||||
activeTrainList.forEach(groupNumber => {
|
|
||||||
this.activeTrains.push(groupNumber);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.$refs.tree && this.$refs.tree.filter(this.queryMember);
|
|
||||||
},
|
|
||||||
getTreeData() {
|
|
||||||
const val = this.memberList;
|
|
||||||
if (val && val.length) {
|
|
||||||
// this.memberData = this.$store.state.training.memberData;
|
|
||||||
const dispatcherList = [];
|
|
||||||
const electricDispatcherList = [];
|
|
||||||
const depotDispatcherList = [];
|
|
||||||
const stationSupervisorList = [];
|
|
||||||
const driverList = [];
|
|
||||||
const maintainerList = [];
|
|
||||||
const ctcOperatorList = [];
|
|
||||||
const stationAssistantList = [];
|
|
||||||
const stationMasterList = [];
|
|
||||||
const stationSignalerList = [];
|
|
||||||
const stationPassengerList = [];
|
|
||||||
const stationSwitchManList = [];
|
|
||||||
const stationFacilitatorList = [];
|
|
||||||
const stationWorkerList = [];
|
|
||||||
const deviceManagerList = [];
|
|
||||||
const trainMasterList = [];
|
|
||||||
const stationElectricWorkerList = [];
|
|
||||||
val.forEach(item => {
|
|
||||||
const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
|
|
||||||
switch (item.type) {
|
|
||||||
case 'DISPATCHER':
|
|
||||||
this.memberData[item.id].labelName = '行调' + (item.name || '');
|
|
||||||
dispatcherList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'ELECTRIC_DISPATCHER':
|
|
||||||
this.memberData[item.id].labelName = '电力调度' + (item.name || '');
|
|
||||||
electricDispatcherList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'DEPOT_DISPATCHER':
|
|
||||||
this.memberData[item.id].labelName = '信号楼-' + device.name + (item.name || '');
|
|
||||||
depotDispatcherList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'STATION_SUPERVISOR':
|
|
||||||
this.memberData[item.id].labelName = '值班员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
||||||
stationSupervisorList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'DRIVER':
|
|
||||||
this.memberData[item.id].labelName = '司机-列车' + item.deviceCode;
|
|
||||||
driverList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'MAINTAINER':
|
|
||||||
this.memberData[item.id].labelName = '通号' + (item.name || '');
|
|
||||||
maintainerList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'RAIL_CTC':
|
|
||||||
this.memberData[item.id].labelName = 'CTC操作员' + device.name;
|
|
||||||
ctcOperatorList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'STATION_ASSISTANT':
|
|
||||||
this.memberData[item.id].labelName = '车站助理-' + device.name + (item.name ? `-${item.name }` : '');
|
|
||||||
stationAssistantList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'STATION_MASTER':
|
|
||||||
this.memberData[item.id].labelName = '车站站长-' + device.name + (item.name ? `-${item.name }` : '');
|
|
||||||
stationMasterList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'STATION_SIGNALER':
|
|
||||||
this.memberData[item.id].labelName = '车站信号员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
||||||
stationSignalerList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'STATION_PASSENGER':
|
|
||||||
this.memberData[item.id].labelName = '车站客运员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
||||||
stationPassengerList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'STATION_SWITCH_MAN':
|
|
||||||
this.memberData[item.id].labelName = '车站扳道员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
||||||
stationSwitchManList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'STATION_FACILITATOR':
|
|
||||||
this.memberData[item.id].labelName = '车站引导员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
||||||
stationFacilitatorList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'STATION_WORKER':
|
|
||||||
this.memberData[item.id].labelName = '车站工务工-' + device.name + (item.name ? `-${item.name }` : '');
|
|
||||||
stationWorkerList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'DEVICE_MANAGER':
|
|
||||||
this.memberData[item.id].labelName = '设备管理员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
||||||
deviceManagerList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'TRAIN_MASTER':
|
|
||||||
// device.name;
|
|
||||||
this.memberData[item.id].labelName = '车务段段长-' + (item.name ? `-${item.name }` : '');
|
|
||||||
trainMasterList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
case 'PARENT_DEPARTMENT':
|
|
||||||
this.memberData[item.id].labelName = '上级部门' + (item.name ? `-${item.name }` : '');
|
|
||||||
break;
|
|
||||||
case 'STATION_ELECTRIC_WORKER':
|
|
||||||
this.memberData[item.id].labelName = '电力工务' + (item.name || '');
|
|
||||||
stationElectricWorkerList.push(this.memberData[item.id]);
|
|
||||||
break;
|
|
||||||
// DEVICE_MANAGER:'设备管理员' deviceManager
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.treeData = [{
|
|
||||||
labelName: '行调',
|
|
||||||
id: 'dispatcher1',
|
|
||||||
children: dispatcherList
|
|
||||||
}, {
|
|
||||||
labelName: '车站值班员',
|
|
||||||
id: 'stationSupervisor',
|
|
||||||
children: stationSupervisorList
|
|
||||||
}, {
|
|
||||||
labelName: '司机',
|
|
||||||
id: 'driver',
|
|
||||||
children: driverList
|
|
||||||
}, {
|
|
||||||
labelName: '通号',
|
|
||||||
id: 'maintainer',
|
|
||||||
children: maintainerList
|
|
||||||
}, {
|
|
||||||
labelName: '车辆段信号楼',
|
|
||||||
id: 'depotDispatcher',
|
|
||||||
children: depotDispatcherList
|
|
||||||
}, {
|
|
||||||
labelName: '电力调度',
|
|
||||||
id: 'electricDispatcher',
|
|
||||||
children: electricDispatcherList
|
|
||||||
}, {
|
|
||||||
labelName: 'CTC操作员',
|
|
||||||
id: 'ctcOperator',
|
|
||||||
children: ctcOperatorList
|
|
||||||
}, {
|
|
||||||
labelName: '车站助理',
|
|
||||||
id: 'stationAssistant',
|
|
||||||
children: stationAssistantList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站站长',
|
|
||||||
id: 'stationMaster',
|
|
||||||
children: stationMasterList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站信号员',
|
|
||||||
id: 'stationSignaler',
|
|
||||||
children: stationSignalerList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站客运员',
|
|
||||||
id: 'stationPassenger',
|
|
||||||
children: stationPassengerList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站扳道员',
|
|
||||||
id: 'stationSwitchMan',
|
|
||||||
children: stationSwitchManList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站引导员',
|
|
||||||
id: 'stationFacilitator',
|
|
||||||
children: stationFacilitatorList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车站工务工',
|
|
||||||
id: 'stationWorker',
|
|
||||||
children: stationWorkerList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '设备管理员',
|
|
||||||
id: 'deviceManager',
|
|
||||||
children: deviceManagerList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '车务段段长 ',
|
|
||||||
id: 'trainMaster',
|
|
||||||
children: trainMasterList
|
|
||||||
},
|
|
||||||
{
|
|
||||||
labelName: '电力工务 ',
|
|
||||||
id: 'stationElectricWorker',
|
|
||||||
children: stationElectricWorkerList
|
|
||||||
}
|
|
||||||
];
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.$refs.tree) {
|
|
||||||
this.$refs.tree.filter(this.queryMember);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
checkChange(data, node, val) {
|
|
||||||
const filter = node.checkedNodes.filter(ii => {
|
|
||||||
return !ii.children;
|
|
||||||
});
|
|
||||||
this.selectTreeNode = filter;
|
|
||||||
},
|
|
||||||
filterNode(value, data) {
|
|
||||||
let flag = false;
|
|
||||||
if (this.memberData[data.id] && this.memberData[data.id].nickName) {
|
|
||||||
flag = this.memberData[data.id].nickName.indexOf(value) !== -1;
|
|
||||||
}
|
|
||||||
let driverNoShow = true;
|
|
||||||
if (data.type && data.type === 'DRIVER' && !this.activeTrains.includes(data.deviceCode)) {
|
|
||||||
driverNoShow = false;
|
|
||||||
}
|
|
||||||
return (data.labelName.indexOf(value) !== -1 || flag) && driverNoShow;
|
|
||||||
},
|
|
||||||
onSubmit() {
|
|
||||||
const list = [];
|
|
||||||
this.selectTreeNode.forEach(item => {
|
|
||||||
list.push(item.id);
|
|
||||||
});
|
|
||||||
const params = {
|
|
||||||
name: this.form.name,
|
|
||||||
imageUrl: this.form.imageUrl,
|
|
||||||
memberIds: list
|
|
||||||
};
|
|
||||||
createGroup(this.groupId, params).then(res => {
|
|
||||||
console.log(res, 'res');
|
|
||||||
this.$refs.form.resetFields();
|
|
||||||
this.handleClose();
|
|
||||||
this.$emit('createGroup');
|
|
||||||
this.$message.success('创建会话群成功！');
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err, 'err');
|
|
||||||
this.$message.error(`创建会话群失败！${err.message}`);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
uploadLogo() {
|
|
||||||
const pic = document.getElementById('upload_file_group');
|
|
||||||
if (!pic.files || !pic.files[0]) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const file = pic.files[0];
|
|
||||||
const mineType = file.type;
|
|
||||||
const fileSize = file.size;
|
|
||||||
if (mineType != 'image/png' && mineType != 'image/jpeg') {
|
|
||||||
this.$message.error('仅支持png和jpeg格式的图片');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (fileSize / (1024 * 1024) > 1) {
|
|
||||||
this.$message.error('图片应该小于1M');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const fileArray = file.name.split('.');
|
|
||||||
const fileType = fileArray[fileArray.length - 1] || '';
|
|
||||||
if (!fileType) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const params = {
|
|
||||||
directory:'conversationGroup',
|
|
||||||
fileName:'group_' + Math.floor(Math.random() * 1000000) + '.' + fileType,
|
|
||||||
method:'PUT'
|
|
||||||
};
|
|
||||||
const that = this;
|
|
||||||
getUploadUrl(params).then((response) => {
|
|
||||||
const url = response.data;
|
|
||||||
if (url) {
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
xhr.open('PUT', url);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
|
|
||||||
xhr.send(file);
|
|
||||||
xhr.onreadystatechange = function() {
|
|
||||||
if (xhr.readyState === 4 && xhr.status == 200) {
|
|
||||||
that.form.imageUrl = params.fileName;
|
|
||||||
} else if (xhr.status != 200) {
|
|
||||||
that.$message.error('上传失败，请稍后再试');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 参数：directory：MINIO文件夹
|
|
||||||
// fileName：存储文件名
|
|
||||||
// method：生成链接的请求方式
|
|
||||||
},
|
|
||||||
doShow() {
|
|
||||||
this.dialogVisible = true;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.$refs.tree) {
|
|
||||||
this.$refs.tree.filter(this.queryMember);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleClose() {
|
|
||||||
this.dialogVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='scss'>
|
|
||||||
.editGroup{
|
|
||||||
.el-dialog__body {
|
|
||||||
padding-top: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
$imgWidth: 70px;
|
|
||||||
$imgHeight: 70px;
|
|
||||||
.editGroup {
|
|
||||||
.body {
|
|
||||||
height: 600px;
|
|
||||||
.left,.right {
|
|
||||||
height: 100%;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
.treeBox {
|
|
||||||
margin-top: 10px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
overflow-y: auto;
|
|
||||||
height: calc(100% - 50px);
|
|
||||||
}
|
|
||||||
.tagBox {
|
|
||||||
margin: 10px;
|
|
||||||
overflow-y: auto;
|
|
||||||
height: 300px;
|
|
||||||
.tag {
|
|
||||||
margin: 5px 10px;
|
|
||||||
}
|
|
||||||
.disableClose {
|
|
||||||
/deep/ .el-icon-close {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.uploadImgDiv {
|
|
||||||
width: $imgWidth;
|
|
||||||
height: $imgHeight;
|
|
||||||
border: 1px #ccc dashed;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
line-height: $imgHeight;
|
|
||||||
}
|
|
||||||
.input_file_box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-quickMenuDrag class="voice-chat-box">
|
|
||||||
<div v-if="chatBoxMin" :id="sideButtonDom.domId" @click="clickBtn">
|
|
||||||
<el-button circle style="color: #0C161A;" icon="el-icon-mic" />
|
|
||||||
</div>
|
|
||||||
<chatDialog ref="chatDialog" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
|
|
||||||
import {UserOperationType} from '@/scripts/ConstDic';
|
|
||||||
import chatDialog from './chatDialog';
|
|
||||||
export default {
|
|
||||||
name: 'ChatBox',
|
|
||||||
components: {
|
|
||||||
chatDialog
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
chatBoxMin() {
|
|
||||||
return this.$store.state.training.chatBoxMin;
|
|
||||||
},
|
|
||||||
sideButtonDom() {
|
|
||||||
return OperationEvent.Conversation.Chat.sideButton;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
clickBtn() {
|
|
||||||
const operate = {
|
|
||||||
operation: this.sideButtonDom.operation,
|
|
||||||
param: { chatBoxMin: this.chatBoxMin },
|
|
||||||
userOperationType: UserOperationType.LEFTCLICK
|
|
||||||
};
|
|
||||||
this.$store.dispatch('training/setChatBoxMin', false);
|
|
||||||
this.$refs.chatDialog.dialogVisible = true;
|
|
||||||
if (this.$store.state.trainingNew.trainingSwitch) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$store.dispatch('trainingNew/next', operate);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.voice-chat-box {
|
|
||||||
position: absolute;
|
|
||||||
left: 20px;
|
|
||||||
bottom: 50%;
|
|
||||||
height: 1px;
|
|
||||||
width: 1px;
|
|
||||||
z-index: 2000;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -303,123 +303,6 @@
|
|||||||
<el-button size="small" type="primary" @click="keyClear">一键清空</el-button>
|
<el-button size="small" type="primary" @click="keyClear">一键清空</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane class="view-control" label="会话群" name="six" :lazy="lazy">
|
|
||||||
<el-tabs v-model="conversationActive" class="card" style="height: calc(100% - 46px)">
|
|
||||||
<el-tab-pane class="view-control" label="地铁CBTC" name="METRO">
|
|
||||||
<div style="height: 100%;overflow-y: auto;padding: 5px;">
|
|
||||||
<el-row :gutter="5" style="margin-bottom: 5px;">
|
|
||||||
<el-col :span="4"><div style="text-align: center;font-size: 14px;">群名称</div></el-col>
|
|
||||||
<el-col :span="4"><div style="text-align: center;font-size: 14px;">群头像</div></el-col>
|
|
||||||
<el-col :span="5"><div style="text-align: center;font-size: 14px;">群主</div></el-col>
|
|
||||||
<el-col :span="8"><div style="text-align: center;font-size: 14px;">成员</div></el-col>
|
|
||||||
<el-col :span="3"><div style="text-align: center;font-size: 14px;">操作</div></el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row v-for="(item, index) in conversationMetroList" :key="index" :gutter="5" class="conversationRow">
|
|
||||||
<el-col :span="4">
|
|
||||||
<el-input v-model="item.name" size="mini" :title="item.name" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<div class="uploadImgDiv">
|
|
||||||
<img v-if="item.imageUrl" :src="getImgUrl(item.imageUrl)" :alt="getImgUrl(item.imageUrl)">
|
|
||||||
<i class="el-icon-plus" />
|
|
||||||
<input :id="'upload_file_METRO' + index" ref="files" type="file" class="input_file_box" accept="image/jpeg,image/png" @change="uploadLogo('METRO', index)">
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="5">
|
|
||||||
<el-select v-model="item.leaderId" placeholder="请选择" size="mini" :title="getMemberTitle(item.leaderId, memberMetroList)">
|
|
||||||
<el-option v-for="elem in memberMetroList" :key="elem.id" :label="getLabel(elem)" :value="elem.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<el-select v-model="item.memberIds" multiple collapse-tags placeholder="请选择" size="mini" :title="getMemberTitle(item.memberIds, memberMetroList)">
|
|
||||||
<el-option v-for="elem in memberMetroList" :key="elem.id" :label="getLabel(elem)" :value="elem.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" style="text-align: center;">
|
|
||||||
<el-button type="primary" size="mini" @click="deleteConversation(index, 'METRO')">删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane class="view-control" label="大铁CTC" name="RAILWAY">
|
|
||||||
<div style="height: 100%;overflow-y: auto;padding: 5px;">
|
|
||||||
<el-row :gutter="5" style="margin-bottom: 5px;">
|
|
||||||
<el-col :span="4"><div style="text-align: center;font-size: 14px;">群名称</div></el-col>
|
|
||||||
<el-col :span="4"><div style="text-align: center;font-size: 14px;">群头像</div></el-col>
|
|
||||||
<el-col :span="5"><div style="text-align: center;font-size: 14px;">群主</div></el-col>
|
|
||||||
<el-col :span="8"><div style="text-align: center;font-size: 14px;">成员</div></el-col>
|
|
||||||
<el-col :span="3"><div style="text-align: center;font-size: 14px;">操作</div></el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row v-for="(item, index) in conversationRailwayList" :key="index" :gutter="5" class="conversationRow">
|
|
||||||
<el-col :span="4">
|
|
||||||
<el-input v-model="item.name" size="mini" :title="item.name" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<div class="uploadImgDiv">
|
|
||||||
<img v-if="item.imageUrl" :src="getImgUrl(item.imageUrl)" :alt="getImgUrl(item.imageUrl)">
|
|
||||||
<i class="el-icon-plus" />
|
|
||||||
<input :id="'upload_file_RAILWAY' + index" ref="files" type="file" class="input_file_box" accept="image/jpeg,image/png" @change="uploadLogo('RAILWAY', index)">
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="5">
|
|
||||||
<el-select v-model="item.leaderId" placeholder="请选择" size="mini" :title="getMemberTitle(item.leaderId, memberRailwayList)">
|
|
||||||
<el-option v-for="elem in memberRailwayList" :key="elem.id" :label="getLabel(elem)" :value="elem.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<el-select v-model="item.memberIds" multiple collapse-tags placeholder="请选择" size="mini" :title="getMemberTitle(item.memberIds, memberRailwayList)">
|
|
||||||
<el-option v-for="elem in memberRailwayList" :key="elem.id" :label="getLabel(elem)" :value="elem.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" style="text-align: center;">
|
|
||||||
<el-button type="primary" size="mini" @click="deleteConversation(index, 'RAILWAY')">删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane class="view-control" label="应急调度" name="EMERGENCY">
|
|
||||||
<div style="height: 100%;overflow-y: auto;padding: 5px;">
|
|
||||||
<el-row :gutter="5" style="margin-bottom: 5px;">
|
|
||||||
<el-col :span="4"><div style="text-align: center;font-size: 14px;">群名称</div></el-col>
|
|
||||||
<el-col :span="4"><div style="text-align: center;font-size: 14px;">群头像</div></el-col>
|
|
||||||
<el-col :span="5"><div style="text-align: center;font-size: 14px;">群主</div></el-col>
|
|
||||||
<el-col :span="8"><div style="text-align: center;font-size: 14px;">成员</div></el-col>
|
|
||||||
<el-col :span="3"><div style="text-align: center;font-size: 14px;">操作</div></el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row v-for="(item, index) in conversationEmergencyList" :key="index" :gutter="5" class="conversationRow">
|
|
||||||
<el-col :span="4">
|
|
||||||
<el-input v-model="item.name" size="mini" :title="item.name" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<div class="uploadImgDiv">
|
|
||||||
<img v-if="item.imageUrl" :src="getImgUrl(item.imageUrl)" :alt="getImgUrl(item.imageUrl)">
|
|
||||||
<i class="el-icon-plus" />
|
|
||||||
<input :id="'upload_file_EMERGENCY' + index" ref="files" type="file" class="input_file_box" accept="image/jpeg,image/png" @change="uploadLogo('EMERGENCY', index)">
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="5">
|
|
||||||
<el-select v-model="item.leaderId" placeholder="请选择" size="mini" :title="getMemberTitle(item.leaderId, memberEmergencyList)">
|
|
||||||
<el-option v-for="elem in memberEmergencyList" :key="elem.id" :label="getLabel(elem)" :value="elem.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<el-select v-model="item.memberIds" multiple collapse-tags placeholder="请选择" size="mini" :title="getMemberTitle(item.memberIds, memberEmergencyList)">
|
|
||||||
<el-option v-for="elem in memberEmergencyList" :key="elem.id" :label="getLabel(elem)" :value="elem.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" style="text-align: center;">
|
|
||||||
<el-button type="primary" size="mini" @click="deleteConversation(index, 'EMERGENCY')">删除</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<div class="button_box">
|
|
||||||
<el-button-group class="map-draft-group">
|
|
||||||
<el-button type="primary" size="small" @click="createConversation">新建会话群</el-button>
|
|
||||||
</el-button-group>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -427,7 +310,6 @@
|
|||||||
import {mapGetters} from 'vuex';
|
import {mapGetters} from 'vuex';
|
||||||
import { getDisStationList } from '@/api/disStation';
|
import { getDisStationList } from '@/api/disStation';
|
||||||
import ConstConfig from '@/scripts/ConstConfig';
|
import ConstConfig from '@/scripts/ConstConfig';
|
||||||
import { getUploadUrl } from '@/api/projectConfig';
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SimulationMember',
|
name: 'SimulationMember',
|
||||||
data() {
|
data() {
|
||||||
@ -435,7 +317,6 @@ export default {
|
|||||||
lazy: true,
|
lazy: true,
|
||||||
activeName: 'first',
|
activeName: 'first',
|
||||||
memberActive: 'METRO',
|
memberActive: 'METRO',
|
||||||
conversationActive: 'METRO',
|
|
||||||
roleList: ConstConfig.ConstSelect.roleTypeList,
|
roleList: ConstConfig.ConstSelect.roleTypeList,
|
||||||
systemList: [
|
systemList: [
|
||||||
{ label: '地铁CBTC', value: 'METRO' },
|
{ label: '地铁CBTC', value: 'METRO' },
|
||||||
@ -496,15 +377,6 @@ export default {
|
|||||||
},
|
},
|
||||||
memberEmergencyList() {
|
memberEmergencyList() {
|
||||||
return this.$store.state.map.map.memberMap.EMERGENCY;
|
return this.$store.state.map.map.memberMap.EMERGENCY;
|
||||||
},
|
|
||||||
conversationMetroList() {
|
|
||||||
return this.$store.state.map.map.conversationGroupMap.METRO;
|
|
||||||
},
|
|
||||||
conversationRailwayList() {
|
|
||||||
return this.$store.state.map.map.conversationGroupMap.RAILWAY;
|
|
||||||
},
|
|
||||||
conversationEmergencyList() {
|
|
||||||
return this.$store.state.map.map.conversationGroupMap.EMERGENCY;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -514,98 +386,6 @@ export default {
|
|||||||
this.initDisStationList();
|
this.initDisStationList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getMemberTitle(val, list) {
|
|
||||||
const mapList = {};
|
|
||||||
list.forEach(item => {
|
|
||||||
mapList[item.id] = item;
|
|
||||||
});
|
|
||||||
const titleArr = [];
|
|
||||||
let valArr = [];
|
|
||||||
if (Array.isArray(val)) {
|
|
||||||
valArr = val;
|
|
||||||
} else if (typeof val == 'string') {
|
|
||||||
valArr = [val];
|
|
||||||
}
|
|
||||||
valArr.forEach(id => {
|
|
||||||
if (mapList[id]) {
|
|
||||||
titleArr.push(this.getLabel(mapList[id]));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return titleArr.join('\n');
|
|
||||||
},
|
|
||||||
getImgUrl(url) {
|
|
||||||
return url ? this.$store.state.user.ossUrl + '/conversationGroup/' + url : '';
|
|
||||||
},
|
|
||||||
getLabel(obj) {
|
|
||||||
let name = '';
|
|
||||||
const findType = this.roleList.find(item => {
|
|
||||||
return item.value == obj.type;
|
|
||||||
});
|
|
||||||
if (findType) {
|
|
||||||
name += findType.label;
|
|
||||||
}
|
|
||||||
name += '-';
|
|
||||||
if (obj.type == 'DISPATCHER') {
|
|
||||||
const findDeviceCode = this.disStationList.find(item => {
|
|
||||||
return item.code == obj.deviceCode;
|
|
||||||
});
|
|
||||||
if (findDeviceCode) {
|
|
||||||
name += findDeviceCode.name;
|
|
||||||
}
|
|
||||||
} else if (obj.type == 'DRIVER') {
|
|
||||||
const findDeviceCode = this.trainList.find(item => {
|
|
||||||
return item.groupNumber == obj.deviceCode;
|
|
||||||
});
|
|
||||||
if (findDeviceCode) {
|
|
||||||
name += findDeviceCode.groupNumber;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const findDeviceCode = this.stationList.find(item => {
|
|
||||||
return item.code == obj.deviceCode;
|
|
||||||
});
|
|
||||||
if (findDeviceCode) {
|
|
||||||
name += findDeviceCode.name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return name;
|
|
||||||
},
|
|
||||||
deleteConversation(index, type) {
|
|
||||||
const conversationMap = { METRO: this.conversationMetroList, RAILWAY: this.conversationRailwayList, EMERGENCY: this.conversationEmergencyList };
|
|
||||||
if (conversationMap[this.conversationActive]) {
|
|
||||||
conversationMap[this.conversationActive].splice(index, 1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
createConversation() {
|
|
||||||
const list = [];
|
|
||||||
this.conversationMetroList.forEach(item => {
|
|
||||||
if (item.id) {
|
|
||||||
list.push(item.id);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.conversationRailwayList.forEach(item => {
|
|
||||||
if (item.id) {
|
|
||||||
list.push(item.id);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.conversationEmergencyList.forEach(item => {
|
|
||||||
if (item.id) {
|
|
||||||
list.push(item.id);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const maxNum = list.length ? Math.max(...list) : 0;
|
|
||||||
const obj = {
|
|
||||||
id: maxNum + 1,
|
|
||||||
name: '',
|
|
||||||
imageUrl: '',
|
|
||||||
leaderId: '',
|
|
||||||
memberIds: []
|
|
||||||
};
|
|
||||||
console.log('🚀 ~ file: index.vue:584 ~ createConversation ~ obj:', obj);
|
|
||||||
const conversationMap = { METRO: this.conversationMetroList, RAILWAY: this.conversationRailwayList, EMERGENCY: this.conversationEmergencyList };
|
|
||||||
if (conversationMap[this.conversationActive]) {
|
|
||||||
conversationMap[this.conversationActive].push(obj);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
initDisStationList() {
|
initDisStationList() {
|
||||||
getDisStationList(this.$route.params.mapId).then(resp => {
|
getDisStationList(this.$route.params.mapId).then(resp => {
|
||||||
this.disStationList = resp.data || [];
|
this.disStationList = resp.data || [];
|
||||||
@ -1056,94 +836,11 @@ export default {
|
|||||||
keyClear() {
|
keyClear() {
|
||||||
const memberMap = { METRO: this.memberMetroList, RAILWAY: this.memberRailwayList, EMERGENCY: this.memberEmergencyList };
|
const memberMap = { METRO: this.memberMetroList, RAILWAY: this.memberRailwayList, EMERGENCY: this.memberEmergencyList };
|
||||||
memberMap[this.clearForm.systemType].splice(0, memberMap[this.clearForm.systemType].length);
|
memberMap[this.clearForm.systemType].splice(0, memberMap[this.clearForm.systemType].length);
|
||||||
},
|
|
||||||
uploadLogo(type, index) {
|
|
||||||
const pic = document.getElementById('upload_file_' + type + index);
|
|
||||||
if (!pic.files || !pic.files[0]) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const file = pic.files[0];
|
|
||||||
const mineType = file.type;
|
|
||||||
const fileSize = file.size;
|
|
||||||
if (mineType != 'image/png' && mineType != 'image/jpeg') {
|
|
||||||
this.$message.error('仅支持png和jpeg格式的图片');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (fileSize / (1024 * 1024) > 1) {
|
|
||||||
this.$message.error('图片应该小于1M');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const fileArray = file.name.split('.');
|
|
||||||
const fileType = fileArray[fileArray.length - 1] || '';
|
|
||||||
if (!fileType) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const params = {
|
|
||||||
directory:'conversationGroup',
|
|
||||||
fileName:'group_' + Math.floor(Math.random() * 1000000) + '.' + fileType,
|
|
||||||
method:'PUT'
|
|
||||||
};
|
|
||||||
const conversationMap = { METRO: this.conversationMetroList, RAILWAY: this.conversationRailwayList, EMERGENCY: this.conversationEmergencyList };
|
|
||||||
const that = this;
|
|
||||||
getUploadUrl(params).then((response) => {
|
|
||||||
const url = response.data;
|
|
||||||
if (url) {
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
xhr.open('PUT', url);
|
|
||||||
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
|
|
||||||
xhr.send(file);
|
|
||||||
xhr.onreadystatechange = function() {
|
|
||||||
if (xhr.readyState === 4 && xhr.status == 200) {
|
|
||||||
if (conversationMap[type] && conversationMap[type][index]) {
|
|
||||||
conversationMap[type][index].imageUrl = params.fileName;
|
|
||||||
}
|
|
||||||
} else if (xhr.status != 200) {
|
|
||||||
that.$message.error('上传失败，请稍后再试');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 参数：directory：MINIO文件夹
|
|
||||||
// fileName：存储文件名
|
|
||||||
// method：生成链接的请求方式
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped>
|
||||||
$imgWidth: 70px;
|
|
||||||
$imgHeight: 70px;
|
|
||||||
.conversationRow {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
line-height: $imgHeight;
|
|
||||||
}
|
|
||||||
.uploadImgDiv {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: $imgWidth;
|
|
||||||
height: $imgHeight;
|
|
||||||
border: 1px #ccc dashed;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
line-height: $imgHeight;
|
|
||||||
}
|
|
||||||
.input_file_box {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user