rt-sim-training-client/src/views/newMap/jointTrainingNew/chatView/chatBox.vue

<template>
  <div class="chatBox" :style="{'bottom':bottom+'px'}">
    <div v-show="!minimize" class="chat-box">
      <div class="chat-box-main">
        <div v-if="!conversitionId && userRole !== 'AUDIENCE' && !commonConversation" class="chat-window">
          <div class="chat-box-header">
            <div class="chat-box-header-title">
              <el-input v-model="queryMember" size="small" placeholder="请输入搜索人员">
                <el-button slot="append" icon="el-icon-search" />
              </el-input>
            </div>
            <div class="minimality" @click="handleMinimality('min')">
              <i class="el-icon-remove" />
            </div>
            <div class="chat-setting" @click="handleSetting()">
              <i class="el-icon-s-tools" />
            </div>
          </div>
          <div class="chat-box-content">
            <el-tree
              ref="tree"
              :data="treeData"
              :props="defaultProps"
              node-key="id"
              default-expand-all
              show-checkbox
              :filter-node-method="filterNode"
              style="margin: 10px;overflow-y: auto;height: 100%;margin-right: 0;"
              @node-click="handleNodeClick"
              @check-change="handleCheckChange"
            >
              <span :id="data.id" slot-scope="{ node, data }">
                <span style="font-size: 14px">{{ data.label + (data.userId? '(' + (simulationUsers[data.userId]||{}).nickName + ')': '') }}</span>
              </span>
            </el-tree>
          </div>
          <div class="chat-box-footer">
            <div style="width: 400px;font-size: 14px;">{{ userString }}</div>
            <el-button size="mini" type="primary" class="chat-box-footer-create" style="right: 80px;" @click="goCommonConversation">公共会话</el-button>
            <el-button size="mini" type="primary" class="chat-box-footer-create" :loading="createLoading" @click="createCoversition()">创建群聊</el-button>
            <div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
          </div>
        </div>
        <div v-else class="chat-window">
          <div class="chat-box-header">
            <!-- <div class="chat-box-header-title">{{ headerTitle }}</div> -->
            <div class="minimality" @click="handleMinimality('min')">
              <i class="el-icon-remove" />
            </div>
            <div class="chat-setting" @click="handleSetting()">
              <i class="el-icon-s-tools" />
            </div>
          </div>
          <div class="chat-box-content">
            <chat-content
              ref="chatContent"
              :project="project"
              :is-answering="IsAnswering"
              :conversition-id="conversitionId"
              :conversition-member-list="conversitionMemberList"
              :message-list="messageList"
              :simulation-users="simulationUsers"
              :common-conversation="commonConversation"
              :user-role="userRole"
              @changeMessageList="changeMessageList"
            />
            <div v-if="recordSending" class="chat_record_tip">
              <div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
              <div class="record_icon" />
              <div class="record_tip_text">正在录音...</div>
              <div class="record_tip_confirm" @click="stopRecording()">确定</div>
              <div class="record_tip_cancle" @click="cancleRecording()">取消</div>
            </div>
            <chat-member-list ref="chatMemberList" :conversition-member-list="conversitionMemberList" :simulation-users="simulationUsers" @connectMember="connectMember" />
          </div>
          <div class="chat-box-footer">
            <div class="chat-box-footer-tool" />
            <el-button v-if="isConversitionCreator && isButtonShow && !commonConversation" size="mini" type="danger" class="chat-box-footer-quit" :loading="quitLoading" @click="quitConversition()">退出群聊</el-button>
            <el-button v-if="!commonConversation" class="chat-box-footer-send" size="mini" type="primary" @click="goCommonConversation">公共会话</el-button>
            <el-button v-if="!conversitionId && userRole !== 'AUDIENCE'" class="chat-box-footer-send" size="mini" type="primary" @click="cancelCommonConversation">成员列表</el-button>
            <el-button v-if="conversitionId && commonConversation" class="chat-box-footer-send" size="mini" type="primary" @click="cancelCommonConversation">私有会话</el-button>
            <el-button v-if="isButtonShow && !commonConversation" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
            <div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="minimize" class="reminder-drag minimize-box">
      <div class="chat-title">聊天窗口</div>
      <div class="minimality" @click="handleMinimality('max')">
        <i class="el-icon-circle-plus" />
      </div>
    </div>
    <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
    <chat-tooltip :group="group" :simulation-users="simulationUsers" @acceptInvite="acceptInvite" />
  </div>
</template>
<script>
import ChatSetting from './chatSetting';
import ChatTooltip from './chatTooltip';
import ChatContent from './chatContent';
import CMD from '@/scripts/cmdPlugin/CommandEnum';
import ChatMemberList from './chatMemberList';
import RecordRTC from 'recordrtc';
import {sendSimulationConversition, startConversition, overSimulationConversition, getAllConversition} from '@/api/chat';
import { getSessionStorage } from '@/utils/auth';
export default {
    name: 'ChatBox',
    components:{
        ChatSetting,
        ChatTooltip,
        ChatContent,
        ChatMemberList
    },
    props: {
        group: {
            type: String,
            required: true
        },
        userRole: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            minimize:true,
            bottom:15,
            recordSending:false,
            conversitionId: '',
            commonConversation: false,
            seconds:0,
            inter:null,
            recorders: null,
            microphone:null,
            createLoading:false,
            form:{
                language:'zh',
                sex:'1'
            },
            scriptTip:'',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            queryMember: '',
            activeTrains: [],
            firstClick: true,
            memberData: {},
            simulationUsers: {},
            userString: '',
            memberIdList: [],
            quitLoading: false,
            conversitionMemberList: [],
            commonMemberList: [],
            privateMemberList: [],
            isConversitionCreator: false,
            messageList: [],
            commonMessageList: [],
            privateMessageList: []
        };
    },
    computed:{
        isButtonShow() {
            return this.userRole != 'AUDIENCE';
        },
        project() {
            return getSessionStorage('project');
        },
        IsAnswering() {
            return !(this.$route.path.includes('refereeJsxtDisplay'));
        }
    },
    watch:{
        queryMember(val) {
            if (this.$refs.tree) {
                this.$refs.tree.filter(val);
            }
        },
        userRole(val) {
            if (val === 'AUDIENCE') {
                // this.isAudienceInitData();
                this.goCommonConversation();
            }
        },
        '$store.state.map.mapViewLoadedCount':function(val) {
            const object = document.querySelector('.menuButton');
            if (object) {
                const objectBottom = parseInt(object.style.bottom) || 0;
                this.bottom = this.bottom + object.offsetHeight + objectBottom;
            }
        },
        '$store.state.training.prdType': function(val) {
            this.$nextTick(() => {
                const object = document.querySelector('.menuButton');
                if (object) {
                    const objectBottom = parseInt(object.style.bottom) || 0;
                    this.bottom = this.bottom + object.offsetHeight + objectBottom;
                }
            });
        },
        '$store.state.socket.createConversition':function(val) {
            const member = this.memberData[val.creatorId];
            if (member.userId == this.$store.state.user.id) {
                const memberList = [];
                val.memberIds.forEach(id=>{
                    if (val.creatorId == id) {
                        memberList.push({memberId:id, connect:true});
                    } else {
                        memberList.push({memberId:id, connect:false});
                    }
                });
                this.conversitionMemberList = memberList;
                this.privateMemberList = memberList;
                this.commonConversation = false;
            }
            this.conversitionId = val.id;
        },
        '$store.state.socket.simulationScriptTip':function(val, old) {
            if (val) {
                if (val.type == 'Conversation') {
                    // const target = this.$refs.chatMemberList.getMember(val.targetId);
                    // if (target && target.length > 0) {
                    this.scriptTip = '请说：' + val.content;
                    // }
                } else if (val.type == 'Command') {
                    const commandName = val.operationType;
                    let device = val.operationType.split('_')[0];
                    if (device == 'CM') {
                        device = 'ControlConvertMenu';
                    }
                    const operateName = Object.values(CMD[device]).find(res=>{ return res.value == commandName; });
                    this.$messageBox('请执行【' + operateName.label + '】操作');
                } else if (val.type == 'Over_Conversation') {
                    this.scriptTip = '请结束当前会话';
                } else if (val.type == 'Start_Conversation' ) {
                    debugger;
                    const inviteMember = [];
                    val.conversationMemberIds.forEach(id=>{
                        if (val.memberId != id) {
                            // const userName = memberList.find(elem=>{ return elem.id == id; });
                            inviteMember.push(this.memberData[id].label);
                        }
                    });
                    this.scriptTip = '请创建会话,选择' + inviteMember.toString();
                }
            }
        },
        '$store.state.socket.scriptFinish':function(val, old) {
            this.$message('剧本执行完成');
        },
        '$store.state.map.activeTrainListChange': function (val) { // 按计划行车的列车列表更新标识
            this.activeTrains = [];
            const activeTrainList = this.$store.state.map.activeTrainList;
            if (activeTrainList && activeTrainList.length) {
                activeTrainList.forEach(groupNumber => {
                    this.activeTrains.push(groupNumber);
                });
            }
            if (this.$refs.tree) {
                this.$refs.tree.filter(this.queryMember);
            }
        },
        '$store.state.training.simulationUserList': {
            handler(val, o) {
                this.simulationUsers = {};
                if (val && val.length) {
                    val.forEach(user => {
                        this.simulationUsers[user.userId] = user;
                    });
                }
            },
            deep: true
        },
        '$store.state.socket.overConversition': function (val) {
            if (val.id === this.conversitionId) {
                this.conversitionId = '';
                this.conversitionMemberList = [];
                this.privateMemberList = [];
                this.messageList = [];
                this.privateMessageList = [];
            }
        },
        '$store.state.training.memberList': function (val) {
            if (val && val.length) {
                this.memberData = this.$store.state.training.memberData;
                const dispatcherList = [];
                const electricDispatcherList = [];
                const depotDispatcherList = [];
                const stationSupervisorList = [];
                const driverList = [];
                const maintainerList = [];
                val.forEach(item => {
                    const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
                    switch (item.type) {
                    case 'DISPATCHER':
                        this.memberData[item.id].label = '行调' + (dispatcherList.length + 1);
                        dispatcherList.push(this.memberData[item.id]);
                        break;
                    case 'ELECTRIC_DISPATCHER':
                        electricDispatcherList.push(this.memberData[item.id]);
                        break;
                    case 'DEPOT_DISPATCHER':
                        depotDispatcherList.push(this.memberData[item.id]);
                        break;
                    case 'STATION_SUPERVISOR':
                        this.memberData[item.id].label = '值班员-' + device.name;
                        stationSupervisorList.push(this.memberData[item.id]);
                        break;
                    case 'DRIVER':
                        this.memberData[item.id].label = '司机-列车' + item.deviceCode;
                        driverList.push(this.memberData[item.id]);
                        break;
                    case 'MAINTAINER':
                        this.memberData[item.id].label = '通号' + (maintainerList.length + 1);
                        maintainerList.push(this.memberData[item.id]);
                        break;
                    }
                });
                this.treeData = [{
                    label: '行调',
                    id: 'dispatcher',
                    type: 'role',
                    children: dispatcherList
                }, {
                    label: '车站值班员',
                    id: 'stationSupervisor',
                    type: 'role',
                    children: stationSupervisorList
                }, {
                    label: '司机',
                    id: 'driver',
                    type: 'role',
                    children: driverList
                }, {
                    label: '通号',
                    id: 'maintainer',
                    type: 'role',
                    children: maintainerList
                }];
            }
        }
    },
    mounted() {
        this.firstClick = true;
        this.scriptTip = '';
    },
    methods:{
        handleMinimality(data) {
            if (data == 'min') {
                this.minimize = true;
                this.$refs.chatSetting.doClose();
            } else {
                this.firstClick && this.$nextTick(() => {
                    this.isAudienceInitData();
                    if (this.$refs.tree) {
                        this.$refs.tree.filter(this.queryMember);
                    }
                    this.firstClick = false;
                });
                this.minimize = false;
            }
        },
        setSetting(data) {
            this.form = data;
        },
        createCoversition() {
            this.createLoading = true;
            startConversition(this.group, this.memberIdList).then(resp => {
                this.conversitionId = resp.data.id;
                this.messageList = [];
                this.privateMessageList = [];
                this.userString = '';
                this.isConversitionCreator = true;
                this.$message.success('创建会话成功！');
                this.createLoading = false;
            }).catch((error) => {
                this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建仿真失败！');
                this.createLoading = false;
            });
        },
        // 语音录制开始
        startRecording() {
            this.scriptTip = '';
            const that = this;
            if (!this.recordSending && !this.recorders && !this.microphone) {
                this.$refs.chatSetting.doClose();
                const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
                navigator.getUserMedia(
                    { audio: true } // 只启用音频
                    , function (stream) {
                        that.microphone = stream;
                        that.recorders = new RecordRTC(that.microphone, {
                            type: 'audio',
                            recorderType: StereoAudioRecorder,
                            numberOfAudioChannels: 1,
                            bitsPerSecond:256000,
                            desiredSampRate: 16000
                        });
                        that.recorders.startRecording();
                        that.recordSending = true;
                        that.inter = setInterval(() => {
                            if (that.seconds < 60) {
                                that.seconds++;
                            } else {
                                clearInterval(that.inter);
                            }
                        }, 1000);
                    }, function (error) {
                        switch (error.code || error.name) {
                        case 'PERMISSION_DENIED':
                        case 'PermissionDeniedError':
                            that.$message({
                                showClose: true,
                                message: '用户拒绝提供信息',
                                type: 'error'
                            });
                            break;
                        case 'NOT_SUPPORTED_ERROR':
                        case 'NotSupportedError':
                            that.$message({
                                showClose: true,
                                message: '浏览器不支持硬件设备',
                                type: 'error'
                            });
                            break;
                        case 'MANDATORY_UNSATISFIED_ERROR':
                        case 'MandatoryUnsatisfiedError':
                            that.$message({
                                showClose: true,
                                message: '无法发现指定的硬件设备',
                                type: 'error'
                            });
                            break;
                        default:
                            that.$message({
                                showClose: true,
                                message: '无法打开麦克风',
                                type: 'error'
                            });
                            break;
                        }
                    }
                );
            }
        },
        cancleRecording() {
            if (this.microphone) {
                clearInterval(this.inter);
                this.seconds = 0;
                this.microphone.stop();
                this.microphone = null;
                this.recordSending = false;
                this.recorders = null;
            }
        },
        // 停止录制
        stopRecording() {
            const that = this;
            this.recorders.stopRecording(function(blobURL) {
                clearInterval(that.inter);
                that.seconds = 0;
                const blob = that.recorders.getBlob();
                const fd = new FormData();
                fd.append('file', blob);
                sendSimulationConversition(that.group, that.conversitionId, fd)
                    .then((data) => {
                    })
                    .catch(error => {
                        console.log(error);
                    });
                if (that.microphone) {
                    that.microphone.stop();
                    that.microphone = null;
                    that.recordSending = false;
                    that.recorders = null;
                }
            });
        },
        handleSetting() {
            this.$refs.chatSetting.doShow();
        },
        handleNodeClick() {

        },
        handleCheckChange() {
            const memberList = this.$refs.tree.getCheckedKeys();
            this.userString = '';
            this.memberIdList = [];
            if (memberList && memberList.length) {
                memberList.forEach(memberId => {
                    const member = this.memberData[memberId];
                    if (member && member.userId) {
                        this.memberIdList.push(member.id);
                        this.userString += ((this.userString ? ',' : '') + member.label + '(' + this.simulationUsers[member.userId].nickName + ')');
                    } else if (member) {
                        this.userString += ((this.userString ? ',' : '') + member.label);
                        this.memberIdList.push(member.id);
                    }
                });
            }
        },
        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.label.indexOf(value) !== -1 || flag) && driverNoShow;
        },
        quitConversition() {
            this.quitLoading = true;
            this.scriptTip = '';
            overSimulationConversition(this.group, this.conversitionId).then(resp => {
                this.conversitionId = '';
                this.conversitionMemberList = [];
                this.privateMemberList = [];
                this.messageList = [];
                this.privateMessageList = [];
                this.quitLoading = false;
            }).catch(() => {
                this.$message.error('退出会话失败！');
                this.quitLoading = false;
            });
        },
        acceptInvite(data) {
            this.userString = '';
            this.conversitionId = data.id;
            this.conversitionMemberList = data.memberList;
            this.privateMemberList = data.memberList;
            this.isConversitionCreator = false;
            this.messageList = [];
            this.privateMessageList = [];
            if (data.messageList && data.messageList) {
                data.messageList.forEach(message => {
                    const member = this.memberData[message.memberId];
                    message.src = `/audio/${message.audioPath}`;
                    if (member) {
                        message.self = this.$store.state.userId == member.userId;
                    }
                    this.messageList.push(message);
                    this.privateMessageList.push(message);
                });
            }
            this.goCommonConversation();
        },
        connectMember(val) {
            this.conversitionMemberList.forEach(member => {
                if (member.memberId == val.memberId) {
                    member.connect = true;
                }
            });
        },
        sortByMessageTime(message1, message2) {
            const time1 = new Date(message1.time).valueOf();
            const time2 = new Date(message2.time).valueOf();
            return time1 - time2;
        },
        isAudienceInitData() {
            getAllConversition(this.group).then(resp => {
                const messages = [];
                if (resp.data && resp.data.length) {
                    resp.data.forEach(conversation => {
                        (conversation.messageList || []).forEach(message => {
                            const member = this.memberData[message.memberId];
                            message.src = `/audio/${message.audioPath}`;
                            message.members = conversation.memberList;
                            if (member) {
                                message.self = this.$store.state.userId == member.userId;
                            }
                            messages.push(message);
                        });
                        if (this.userRole !== 'AUDIENCE') {
                            const user = this.simulationUsers[this.$store.state.user.id];
                            this.isConversitionCreator = conversation.creatorId == user.memberId;
                            !conversation.over && conversation.memberList.forEach(member =>{
                                if (member.memberId == user.memberId && member.connect) {
                                    this.conversitionMemberList = conversation.memberList;
                                    this.conversitionId = conversation.id;
                                    this.messageList = [];
                                    conversation.messageList.forEach(message => {
                                        const member = this.memberData[message.memberId];
                                        message.src = `/audio/${message.audioPath}`;
                                        if (member) {
                                            message.self = this.$store.state.userId == member.userId;
                                        }
                                        this.privateMessageList.push(message);
                                        this.messageList.push(message);
                                    });
                                }
                            });
                        }
                    });
                }
                this.commonMessageList = messages.sort(this.sortByMessageTime);
                const temDispatcherList = [];
                const temStationSupervisorList = [];
                const temMaintainerList = [];
                const temDriverList = [];
                this.$store.state.training.memberList.forEach(item =>{
                    switch (item.type) {
                    case 'DISPATCHER':
                        temDispatcherList.push({memberId: item.id, connect:true });
                        break;
                    case 'STATION_SUPERVISOR':
                        temStationSupervisorList.push({memberId: item.id, connect:true });
                        break;
                    case 'MAINTAINER':
                        temMaintainerList.push({memberId: item.id, connect:true });
                        break;
                    case 'DRIVER':
                        temDriverList.push({memberId: item.id, connect:true });
                        break;
                    }
                });
                if (this.userRole === 'AUDIENCE' || this.commonConversation) {
                    this.conversitionMemberList = [];
                    this.messageList = this.commonMessageList;
                    this.commonMemberList = [...temDispatcherList, ...temStationSupervisorList, ...temMaintainerList, ...temDriverList];
                    this.conversitionMemberList = this.commonMemberList;
                }
            });
        },
        changeMessageList(data) {
            if (data.flag) {
                this.messageList.push(data.message);
            }
            this.commonMessageList.push(data.message);
            if (this.userRole !== 'AUDIENCE' && data.flag && data.private) {
                this.privateMessageList.push(data.message);
            }
        },
        goCommonConversation() {
            !this.commonConversation && this.$refs.chatContent && this.$refs.chatContent.conversationChange();
            this.commonConversation = true;
            this.conversitionMemberList = this.commonMemberList;
            this.messageList = this.commonMessageList;
        },
        cancelCommonConversation() {
            this.commonConversation && this.$refs.chatContent && this.$refs.chatContent.conversationChange();
            this.commonConversation = false;
            this.conversitionMemberList = this.privateMemberList;
            this.messageList = this.privateMessageList;
        },
        clearAllData() {
            this.recordSending = false;
            this.conversitionId = '';
            this.inter = null;
            this.recorders = null;
            this.microphone = null;
            this.treeData = [];
            this.conversitionMemberList = [];
            this.messageList = [];
        }
    }
};
</script>
<style lang="scss" scoped>
.chatBox{
  width: 503px;
  position: absolute;
  padding-left:5px;
  left: 0;
  bottom:28px;
  z-index:9;
}
.chat-box{
  width: 100%;
  height: 400px;
}
.chat-box-header{
    width: 100%;
    height: 40px;
    border-bottom: 1px #dedede solid;
}
.chat-box-header-title{
  font-size: 15px;
  margin-left: 15px;
  display: inline-block;
  margin-top: 5px;
  width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-box-content{
    width: 100%;
    height: 300px;
    border-bottom: 1px #dedede solid;
    position: relative;
}
.chat-box-contentTip{

}
.chat-box-footer{
    display: inline-block;
    width: 100%;
	height: 50px;
	overflow-y: auto;
}
.chat-window{
    display: inline-block;
    width: 100%;
}
.chat-setting{
    float: right;
    line-height: 40px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 16px;
}
.chat-createGroup{
    float: right;
    line-height: 40px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
}
.chat-box-footer-tool{
    width: 100%;
    height: 17px;
}
.chat-box-footer-send{
    background: #36a2fd;
    width: 65px;
    font-size: 12px;
    padding: 5px 0px 4px 0px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
.chat-box-footer-quit{
	width: 65px;
	font-size: 12px;
	padding: 5px 0px 4px 0px;
	text-align: center;
	border-radius: 3px;
	color: #fff;
	margin-left: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}
.minimality {
    float: right;
    line-height: 40px;
    margin-right: 10px;
    cursor: pointer;
    font-size:16px;
}
.chat-box-main{
    position: absolute;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
    border-right: 1px #dedede solid;
    z-index: 4;
    background: #fff;
    border-radius: 5px;
    left:5px;
    font-size:0;
}
.chat-coversition{

}
.coversition-list{

}
.chat-box-footer-create{
    width: 65px;
    font-size: 12px;
    padding: 5px 0px 4px 0px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    position: absolute;
	right: 5px;
	bottom: 5px;
    margin-right: 10px;
    margin-top: 10px;
    cursor: pointer;
}
.showMembers{
    float: right;
    line-height: 40px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 17px;
}
#record_progress_bar{
    height: 100%;
    position: absolute;
    background: #bbe5f5;
}
.chat_record_tip{
    height: 28px;
    display: inline-block;
    background: #dfe6ee;
    width: 370px;
    font-size: 13px;
    border-top: 1px #d8dce5 solid;
    position: absolute;
    bottom: 0;
    left: 0;
}
.record_icon{
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #25d825;
    border-radius: 10px;
    left: 7px;
    margin-right: 0px;
    box-shadow: -1px 0px 3px #6d6d6d;
    border: 1px #28d228 solid;
    position: absolute;
    top: 10px;
}
.record_tip_text{
    display: inline-block;
    font-size: 12px;
    margin-left: 3px;
    // padding: 8px 0px 6px 0px;
    position: absolute;
    top: 8px;
    left:20px
}
.record_tip_confirm{
    position: absolute;
    right: 63px;
    padding: 3px 0px 2px 0px;
    border: 1px #a2a5aa solid;
    border-radius: 5px;
    width: 45px;
    text-align: center;
    font-size: 12px;
    top: 4px;
    background: #eeeeee;
    cursor: pointer;
}
.record_tip_cancle{
    position: absolute;
    right: 10px;
    padding: 3px 0px 2px 0px;
    border: 1px #a2a5aa solid;
    border-radius: 5px;
    width: 45px;
    text-align: center;
    font-size: 12px;
    top: 4px;
    background: #eeeeee;
    cursor: pointer;
}
.chat-box-footer-send.disbled{
    cursor: no-drop;
}

.minimize-box {
    width: 97.5%;
    height: 40px;
    position: absolute;
    left: 5px;
    bottom: 0;
    z-index: 222;
    background: #fff;
    border-radius: 5px;

    .chat-title {
        float: left;
        font-size: 15px;
        margin-left: 10px;
        line-height: 40px;
    }

    .minimality {
        float: right;
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
        cursor: pointer;
    }
}

.scriptTip{
    position: absolute;
    width: 260px;
    padding: 10px;
    background: rgb(250, 246, 3);
    right: 89px;
    bottom:45px;
    border-radius: 5px;
    font-size: 14px;
    color: #000000;
    z-index:2;
}
.scriptTip::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 8px solid #faf603;
    right: 16px;
    bottom: -7px;
}

</style>