This commit is contained in:
fan 2020-04-28 16:17:55 +08:00
commit ce8d6244f1
15 changed files with 347 additions and 138 deletions

View File

@ -6,7 +6,7 @@ NODE_ENV = 'development'
# VUE_APP_BASE_API = 'https://joylink.club/jlcloud' # VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
# VUE_APP_BASE_API = 'http://192.168.3.4:9000' # VUE_APP_BASE_API = 'http://192.168.3.4:9000'
VUE_APP_BASE_API = 'http://192.168.3.6:9000' VUE_APP_BASE_API = 'http://192.168.3.6:9000'
VUE_VOICE_API = 'https://test.joylink.club' VUE_APP_VOICE_API = 'https://test.joylink.club'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable, # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled. # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

View File

@ -4,4 +4,4 @@ VUE_APP_PRO = 'local'
# base api # base api
VUE_APP_BASE_API = 'https://joylink.club/jlcloud' VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
VUE_VOICE_API = 'https://joylink.club' VUE_APP_VOICE_API = 'https://joylink.club'

View File

@ -3,4 +3,4 @@ NODE_ENV = 'production'
# base api # base api
VUE_APP_BASE_API = 'https://joylink.club/jlcloud' VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
VUE_VOICE_API = 'https://joylink.club' VUE_APP_VOICE_API = 'https://joylink.club'

View File

@ -3,4 +3,4 @@ NODE_ENV = 'test'
# base api # base api
VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud' VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud'
VUE_VOICE_API = 'https://test.joylink.club' VUE_APP_VOICE_API = 'https://test.joylink.club'

View File

@ -253,8 +253,8 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
$bg: #508F86; $bg: #78e2ad;
$hoverBg: #508F86; $hoverBg: #78e2ad;
.pop-menu { .pop-menu {
background-color: $bg; background-color: $bg;

View File

@ -108,11 +108,11 @@ export default {
<style> <style>
.xian-02__menus .pop-menu { .xian-02__menus .pop-menu {
background: #508F86; background: #78e2ad;
padding: 0; padding: 0;
} }
.xian-02__menus .pop-menu .el-popover{ .xian-02__menus .pop-menu .el-popover{
background: #508F86; background: #78e2ad;
} }
.xian-02__menus .pop-menu span { .xian-02__menus .pop-menu span {
color: #000; color: #000;
@ -129,15 +129,15 @@ export default {
.xian-02__pop_tip_station{ .xian-02__pop_tip_station{
padding: 0 !important; padding: 0 !important;
margin-left: 1px !important; margin-left: 1px !important;
background: #508F86; background: #78e2ad;
border: 1px solid #6B736A; border: 1px solid #6B736A;
border-radius: 0; border-radius: 0;
} }
.xian-02__system .el-dialog { .xian-02__system .el-dialog {
background: #AEB2C3; background: #9da5ff;
box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset; box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
border: 1px solid #AEB2C3; border: 1px solid #9da5ff;
border-radius: 6px; border-radius: 6px;
font-size: 13px !important; font-size: 13px !important;
color: #000; color: #000;

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<pop-menu ref="popMenu" :menu="menu" /> <pop-menu ref="popMenu" :menu="menu" pop-class="xian-02__pop_tip_station" :tip-msg="topTip" :tip-subhead="tipSubhead" />
<section-control ref="sectionControl" /> <section-control ref="sectionControl" />
<section-un-lock ref="sectionUnLock" /> <section-un-lock ref="sectionUnLock" />
<speed-limit-control ref="speedLimitControl" /> <speed-limit-control ref="speedLimitControl" />
@ -10,7 +10,7 @@
</template> </template>
<script> <script>
import PopMenu from '@/components/PopMenu'; import PopMenu from '@/components/PopMenu/popTip';
import SectionControl from './dialog/sectionControl'; import SectionControl from './dialog/sectionControl';
import SectionUnLock from './dialog/sectionUnLock'; import SectionUnLock from './dialog/sectionUnLock';
import SpeedLimitControl from './dialog/speedLimitControl'; import SpeedLimitControl from './dialog/speedLimitControl';
@ -42,6 +42,8 @@ export default {
}, },
data() { data() {
return { return {
topTip: '',
tipSubhead: '',
menu: [], menu: [],
menuNormal: { menuNormal: {
Local: [ Local: [
@ -73,24 +75,45 @@ export default {
], ],
Center: [ Center: [
{ {
label: '区段跟踪激活', label: '区段封锁',
handler: this.active, handler: this.lock,
cmdType: CMD.Section.CMD_SECTION_ACTIVE cmdType: CMD.Section.CMD_SECTION_BLOCK
}, },
{ {
label: '区段跟踪切除', label: '区段解封',
handler: this.split, handler: this.unlock,
cmdType: CMD.Section.CMD_SECTION_CUT_OFF cmdType: CMD.Section.CMD_SECTION_UNBLOCK
}, },
{ {
label: '确认计轴有效', label: '设备标签',
handler: this.alxeEffective, children: [
cmdType: CMD.Section.CMD_SECTION_COMFIRMATION_AXLE {
label: '创建设备标签',
handler: this.undeveloped
},
{
label: '查看设备标签',
handler: this.undeveloped
},
{
label: '更改设备标签',
handler: this.undeveloped
},
{
label: '删除设备标签',
handler: this.undeveloped
}
]
}, },
{ {
label: '设置临时限速', label: '设置临时限速',
handler: this.setSpeed, handler: this.setSpeed,
cmdType: CMD.Section.CMD_SECTION_SET_LIMIT_SPEED cmdType: CMD.Section.CMD_SECTION_SET_LIMIT_SPEED
},
{
label: '帮助',
handler: this.undeveloped,
cmdType: CMD.Signal.CMD_SIGNAL_DETAIL
} }
] ]
}, },
@ -130,13 +153,15 @@ export default {
}, },
initMenu() { initMenu() {
// //
this.menu = MenuContextHandler.covert(this.menuNormal); // this.menu = MenuContextHandler.covert(this.menuNormal);
this.menu = this.menuNormal.Center;
// //
if (this.operatemode === OperateMode.FAULT) { if (this.operatemode === OperateMode.FAULT) {
this.menu = this.menuForce; this.menu = this.menuForce;
} }
}, },
doShow(point) { doShow(point) {
this.topTip = `轨道: ${this.selected.name}`;
this.clickEvent(); this.clickEvent();
this.initMenu(); this.initMenu();
if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) { if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) {

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<pop-menu ref="popMenu" :menu="menu" trigger="click" pop-class="xian-02__pop_tip_station" /> <pop-menu ref="popMenu" :menu="menu" :tip-msg="topTip" :tip-subhead="tipSubhead" pop-class="xian-02__pop_tip_station" />
<route-selection ref="routeSelection" /> <route-selection ref="routeSelection" />
<route-lock ref="routeLock" /> <route-lock ref="routeLock" />
<route-un-lock ref="routeUnLock" /> <route-un-lock ref="routeUnLock" />
@ -24,7 +24,7 @@ import RouteDetail from './dialog/routeDetail';
import NoticeInfo from './dialog/childDialog/childDialog/noticeInfo'; import NoticeInfo from './dialog/childDialog/childDialog/noticeInfo';
import {menuOperate, commitOperate} from './utils/menuOperate'; import {menuOperate, commitOperate} from './utils/menuOperate';
import CMD from '@/scripts/cmdPlugin/CommandEnum'; import CMD from '@/scripts/cmdPlugin/CommandEnum';
import MenuContextHandler from '@/scripts/cmdPlugin/MenuContextHandler'; // import MenuContextHandler from '@/scripts/cmdPlugin/MenuContextHandler';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler'; import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import { DeviceMenu, OperateMode } from '@/scripts/ConstDic'; import { DeviceMenu, OperateMode } from '@/scripts/ConstDic';
@ -53,6 +53,8 @@ export default {
}, },
data() { data() {
return { return {
topTip: '',
tipSubhead: '',
menu: [], menu: [],
menuNormal: { menuNormal: {
Local: [ Local: [
@ -138,24 +140,29 @@ export default {
handler: this.unlock, handler: this.unlock,
cmdType: CMD.Signal.CMD_SIGNAL_UNBLOCK cmdType: CMD.Signal.CMD_SIGNAL_UNBLOCK
}, },
{
label: '引导信号'
// handler: this.unlock,
// cmdType: CMD.Signal.CMD_SIGNAL_UNBLOCK
},
{ {
label: '设备标签', label: '设备标签',
children: [ children: [
{ {
label: '创建设备标签', label: '创建设备标签',
handler: this.atsAutoControlALL handler: this.undeveloped
}, },
{ {
label: '查看设备标签', label: '查看设备标签',
handler: this.atsAutoControlALL handler: this.undeveloped
}, },
{ {
label: '更改设备标签', label: '更改设备标签',
handler: this.atsAutoControlALL handler: this.undeveloped
}, },
{ {
label: '删除设备标签', label: '删除设备标签',
handler: this.atsAutoControlALL handler: this.undeveloped
} }
] ]
}, },
@ -226,6 +233,7 @@ export default {
}, },
doShow(point) { doShow(point) {
this.topTip = `信号机: ${this.selected.name}`;
this.clickEvent(); this.clickEvent();
this.initMenu(); this.initMenu();
if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) { if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) {

View File

@ -128,6 +128,20 @@ export default {
} }
] ]
}, },
menuEnabled: [
{
label: '使能',
handler: this.undeveloped
},
{
label: '模拟',
handler: this.undeveloped
},
{
label: '帮助',
handler: this.undeveloped
}
],
menuForce: [ menuForce: [
{ {
label: '设置故障', label: '设置故障',
@ -156,7 +170,7 @@ export default {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Switch) && !this.buttonOperation) { if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Switch) && !this.buttonOperation) {
this.doShow(this.$store.state.menuOperation.menuPosition); this.doShow(this.$store.state.menuOperation.menuPosition);
} else if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Enabled) && !this.buttonOperation) { } else if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Enabled) && !this.buttonOperation) {
console.log('点击道岔使能标识'); this.doEnabledShow(this.$store.state.menuOperation.menuPosition);
} else { } else {
this.doClose(); this.doClose();
} }
@ -178,6 +192,9 @@ export default {
this.menu = this.menuForce; this.menu = this.menuForce;
} }
}, },
initMenuEnabled() {
this.menu = this.menuEnabled;
},
doShow(point) { doShow(point) {
this.topTip = `道岔: ${this.selected.name}`; this.topTip = `道岔: ${this.selected.name}`;
this.clickEvent(); this.clickEvent();
@ -186,6 +203,14 @@ export default {
this.$refs.popMenu.resetShowPosition(point); this.$refs.popMenu.resetShowPosition(point);
} }
}, },
doEnabledShow(point) {
this.topTip = `一级命令使能`;
this.clickEvent();
this.initMenuEnabled();
if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) {
this.$refs.popMenu.resetShowPosition(point);
}
},
doClose() { doClose() {
if (this.$refs && this.$refs.popMenu) { if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.close(); this.$refs.popMenu.close();

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<pop-menu ref="popMenu" :menu="menu" /> <pop-menu ref="popMenu" :menu="menu" :tip-msg="topTip" :tip-subhead="tipSubhead" />
<notice-info ref="noticeInfo" /> <notice-info ref="noticeInfo" />
<train-delete ref="trainDelete" /> <train-delete ref="trainDelete" />
<train-define ref="trainDefine" /> <train-define ref="trainDefine" />
@ -17,7 +17,7 @@
</template> </template>
<script> <script>
import PopMenu from '@/components/PopMenu'; import PopMenu from '@/components/PopMenu/popTip';
import NoticeInfo from './dialog/childDialog/childDialog/noticeInfo'; import NoticeInfo from './dialog/childDialog/childDialog/noticeInfo';
import { MenuDisabledState } from './utils/menuItemStatus'; import { MenuDisabledState } from './utils/menuItemStatus';
import TrainDelete from './dialog/trainDelete'; import TrainDelete from './dialog/trainDelete';
@ -59,6 +59,8 @@ export default {
}, },
data() { data() {
return { return {
topTip: '',
tipSubhead: '',
menu: [], menu: [],
menuNormal: { menuNormal: {
Local: [ Local: [
@ -134,74 +136,190 @@ export default {
], ],
Center: [ Center: [
{ {
label: '设置车组号', label: '追踪号',
handler: this.addTrainId, children: [
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan {
label: '目的地ID',
handler: this.atsAutoControlALL
},
{
label: '删除ID',
handler: this.atsAutoControlALL
},
{
label: '更改追踪号',
handler: this.atsAutoControlALL
},
{
label: '交换追踪号',
handler: this.atsAutoControlALL
},
{
label: '运行等级',
handler: this.atsAutoControlALL
},
{
label: '列车模式',
handler: this.atsAutoControlALL
},
{
label: '惰性模式',
handler: this.atsAutoControlALL
},
{
label: '旁路模式',
handler: this.atsAutoControlALL
}
]
}, },
{ {
label: '删除车组号', label: '列车明细',
handler: this.delTrainId, handler: this.atsAutoControlALL
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
}, },
{ {
label: '移动车组号', label: '请求',
handler: this.moveTrainId, children: [
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan {
label: '扣车/放行',
children:[
{
label: '扣车',
handler: this.atsAutoControlALL
},
{
label: '发车 ',
handler: this.atsAutoControlALL
}
]
},
{
label: '停车/放行',
handler: this.atsAutoControlALL
},
{
label: '就绪状态',
handler: this.atsAutoControlALL
},
{
label: '测试',
handler: this.atsAutoControlALL
},
{
label: '救援列车',
handler: this.atsAutoControlALL
},
{
label: '开车门',
handler: this.atsAutoControlALL
},
{
label: '关车门',
handler: this.atsAutoControlALL
}
]
}, },
{ {
label: '新建计划车', label: '设备标签',
handler: this.addPlanTrain, children: [
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan {
label: '创建设备标签',
handler: this.undeveloped
},
{
label: '查看设备标签',
handler: this.undeveloped
},
{
label: '更改设备标签',
handler: this.undeveloped
},
{
label: '删除设备标签',
handler: this.undeveloped
}
]
}, },
{ {
type: 'separator' label: '列车报警确认',
handler: this.undeveloped
}, },
{ {
label: '设置计划车', label: '更新列车计划',
handler: this.setPlanTrain, handler: this.undeveloped
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
}, },
{ {
label: '设置头码车', label: '帮助',
handler: this.setHeadTrain, handler: this.undeveloped
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
},
{
label: '设置人工车',
handler: this.setWorkTrain,
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
},
{
label: '设乘务组号',
handler: this.undeveloped,
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
},
{
type: 'separator'
},
{
label: '标记ATP切除',
handler: this.setTrainATPdel,
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
},
{
label: '标记ATP恢复',
handler: this.setTrainATPRec,
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
},
{
type: 'separator'
},
{
label: '旅行冲突列车',
handler: this.undeveloped,
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
},
{
label: '列车信息',
handler: this.undeveloped,
cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
} }
// {
// label: '',
// handler: this.addTrainId,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// label: '',
// handler: this.delTrainId,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// label: '',
// handler: this.moveTrainId,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// label: '',
// handler: this.addPlanTrain,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// type: 'separator'
// },
// {
// label: '',
// handler: this.setPlanTrain,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// label: '',
// handler: this.setHeadTrain,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// label: '',
// handler: this.setWorkTrain,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// label: '',
// handler: this.undeveloped,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// type: 'separator'
// },
// {
// label: 'ATP',
// handler: this.setTrainATPdel,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// label: 'ATP',
// handler: this.setTrainATPRec,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// type: 'separator'
// },
// {
// label: '',
// handler: this.undeveloped,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// },
// {
// label: '',
// handler: this.undeveloped,
// cmdType: CMD.TrainWindow.CMD_Train_Init_Plan
// }
] ]
}, },
menuForce: [ menuForce: [
@ -259,6 +377,7 @@ export default {
} }
}, },
doShow(point) { doShow(point) {
this.topTip = `道岔: ${this.selected.name}`;
this.clickEvent(); this.clickEvent();
this.initMenu(); this.initMenu();

View File

@ -1,35 +1,36 @@
import * as throttleUtil from '@/utils/throttle'; import * as throttleUtil from '@/utils/throttle';
export default { export default {
data() { data() {
return { return {
_clientWidth: 0, _clientWidth: 0,
_clientHeight: 0 _clientHeight: 0
}; };
}, },
beforeMount() { beforeMount() {
// 调用节流函数限制执行频率
var fn = throttleUtil.createOrUpdate( },
this, mounted() {
'_resizeHandler', this._resizeHandler();
300, // 调用节流函数限制执行频率
'debounce' var fn = throttleUtil.createOrUpdate(
); this,
window.addEventListener('resize', fn); '_resizeHandler',
}, 300,
mounted() { 'debounce'
this._resizeHandler(); );
}, window.addEventListener('resize', fn);
methods: { },
_resizeHandler() { methods: {
this._clientWidth = document.documentElement.clientWidth; _resizeHandler() {
this._clientHeight = document.documentElement.clientHeight; this._clientWidth = document.documentElement.clientWidth;
if (this.resizeHandler) { this._clientHeight = document.documentElement.clientHeight;
this.resizeHandler(); if (this.resizeHandler) {
} this.resizeHandler();
} }
}, }
beforeDestroy() { },
window.removeEventListener('resize', this._resizeHandler); beforeDestroy() {
} window.removeEventListener('resize', this._resizeHandler);
}
}; };

View File

@ -154,6 +154,13 @@ function handleSimulationInfo(state, data) {
date: +new Date(`${myDate1} ${chatTime}`) date: +new Date(`${myDate1} ${chatTime}`)
}; };
state.simulationText = params; state.simulationText = params;
if (state.coversitionList[data.conversationId]) {
state.coversitionList[data.conversationId].push(params);
} else {
state.coversitionList[data.conversationId] = [];
state.coversitionList[data.conversationId].push(params);
}
// switch (data.member.role) { // switch (data.member.role) {
// case '01': // case '01':
// role = '管理员'; // role = '管理员';
@ -235,6 +242,7 @@ const socket = {
simulationStart: '', // 仿真-开始消息 simulationStart: '', // 仿真-开始消息
simulationReset: '', // 仿真-异常消息 simulationReset: '', // 仿真-异常消息
simulationText: {}, // 仿真-用户交互消息(聊天/命令) simulationText: {}, // 仿真-用户交互消息(聊天/命令)
coversitionList:{}, // 历史仿真-用户消息列表
message: {}, // 仿真聊天 message: {}, // 仿真聊天
msgQueue: [], // 命令请求列表 msgQueue: [], // 命令请求列表
@ -259,7 +267,6 @@ const socket = {
beLogoutCount: 0, // 被登出 beLogoutCount: 0, // 被登出
runPlanReloadCount: 0 // 仿真运行图变更 runPlanReloadCount: 0 // 仿真运行图变更
}, },
getters: { getters: {
}, },
mutations: { mutations: {

View File

@ -256,7 +256,6 @@ export default {
}); });
}, },
'size.width': function(val) { 'size.width': function(val) {
console.log('width');
this.setWindowSize(); this.setWindowSize();
}, },
'$store.state.app.windowSizeCount': function() { '$store.state.app.windowSizeCount': function() {
@ -591,14 +590,14 @@ export default {
this.drivingShow = false; this.drivingShow = false;
}, },
setWindowSize() { setWindowSize() {
this.$nextTick(() => { // this.$nextTick(() => {
const width = this.size ? this.size.width : this.width; const width = this.size ? this.size.width : this.width;
const height = this.size ? this.size.height : this.height; const height = this.size ? this.size.height : this.height;
this.$store.dispatch('config/resize', { width, height }); this.$store.dispatch('config/resize', { width, height });
this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode }); this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
}); // });
}, },
overallTranslation(flag) { overallTranslation(flag) {
const panel = document.getElementById('leftSlider'); const panel = document.getElementById('leftSlider');

View File

@ -1,5 +1,6 @@
<template> <template>
<div v-quickMenuDrag class="chatBox"> <!-- v-quickMenuDrag -->
<div class="chatBox">
<div v-show="!minimize" class="chat-box"> <div v-show="!minimize" class="chat-box">
<div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'"> <div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'">
<div class="chat-member-title">成员列表</div> <div class="chat-member-title">成员列表</div>
@ -33,7 +34,7 @@
</div> </div>
</div> </div>
<div class="chat-box-content"> <div class="chat-box-content">
<chat-content :current-coversition="currentCoversition" /> <chat-content ref="chatContent" :current-coversition="currentCoversition" />
<div v-if="recordSending" class="chat_record_tip"> <div v-if="recordSending" class="chat_record_tip">
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" /> <div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
<div class="record_icon" /> <div class="record_icon" />
@ -285,6 +286,7 @@ export default {
changeCoversition(coversition) { changeCoversition(coversition) {
this.headerTitle = coversition.name; this.headerTitle = coversition.name;
this.currentCoversition = {id:coversition.id, group:coversition.group}; this.currentCoversition = {id:coversition.id, group:coversition.group};
this.$refs.chatContent.reloadData(this.currentCoversition);
} }
} }
}; };

View File

@ -6,10 +6,11 @@
<div v-if="chatContent.group" class="userName">{{ chatContent.memberName }}</div> <div v-if="chatContent.group" class="userName">{{ chatContent.memberName }}</div>
<div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div> <div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
</div> </div>
<div class="userBubble"> <div class="userBubble" @click="playAudio('audio'+index)">
<div class="userMessage"> <div class="userMessage">
<div class="messageText">{{ chatContent.message }}</div> <span class="el-icon-video-play playicon" />
<audio :src="baseUrl+chatContent.src" style="display:none" /> <span class="messageText">{{ chatContent.message }}</span>
<audio :id="'audio'+index" :src="baseUrl+chatContent.src" style="display:none" />
</div> </div>
</div> </div>
</div> </div>
@ -27,23 +28,39 @@ export default {
data() { data() {
return { return {
chatContentList:[], chatContentList:[],
baseUrl:'' coversition:{},
baseUrl:process.env.VUE_APP_VOICE_API
}; };
}, },
watch:{ watch:{
'$store.state.socket.simulationText':function (val, old) { // 仿 '$store.state.socket.simulationText':function (val, old) { // 仿
if (this.currentCoversition.id == val.conversationId) { if (this.currentCoversition.id == val.conversationId) {
this.chatContentList.push(this.$store.state.socket.simulationText); const simulationText = this.$store.state.socket.simulationText;
this.chatContentList.push(simulationText);
} }
} }
}, },
mounted() { created() {
console.log('VUE_VOICE_API' + process.env.VUE_VOICE_API); this.coversition = this.currentCoversition;
this.baseUrl = process.env.VUE_VOICE_API; this.inintData();
}, },
methods:{ methods:{
inintData() {
const coversitionListAll = Object.assign({}, this.$store.state.socket.coversitionList);
const coversitionList = coversitionListAll[this.coversition.id] || [];
// console.log('inintData---coversitionList' + JSON.stringify(this.$store.state.socket.coversitionList[this.coversition.id]));
this.chatContentList = coversitionList;
},
formatTime(time) { formatTime(time) {
return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || time; return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || time;
},
playAudio(id) {
document.querySelector('#' + id).play();
},
reloadData(currentCoversition) {
this.chatContentList = [];
this.coversition = currentCoversition;
this.inintData();
} }
} }
}; };
@ -55,6 +72,7 @@ export default {
display: inline-block; display: inline-block;
overflow: auto; overflow: auto;
padding-bottom: 20px; padding-bottom: 20px;
cursor:auto;
} }
.leftUser{ .leftUser{
float: left; float: left;
@ -72,15 +90,20 @@ export default {
.userName{} .userName{}
.userChatTime{font-size: 12px;} .userChatTime{font-size: 12px;}
.userBubble{ .userBubble{
max-width: 300px; max-width: 200px;
font-size: 12px; font-size: 12px;
padding: 10px; padding: 10px;
background: #ccc; background: #ccc;
border-radius: 5px; border-radius: 5px;
cursor: pointer;
}
.playicon{
font-size: 20px;
vertical-align: top;
} }
.textRight{text-align: right;} .textRight{text-align: right;}
.userMessage{} .userMessage{}
.messageText{} .messageText{line-height: 20px;}
.chatContentInClass{ .chatContentInClass{
display: inline-block; display: inline-block;
width: 100%; width: 100%;