智能问答---模拟聊天（文字+语音）

初始状态：

 问答状态：

项目中，涉及到了9种问答模式，所以，有多种回答判断。其中，有的结果需要需要表格展示，表中的名称是能够点击并跳转，这样就需要对接口获取的数据进行处理后再展示。为保证完整性，复制了整个文件。

实现思路：

对话存入数组中，用户问答的给一个role为user，机器人回答的role为robot。在循环展示过程中，对role进行判断，针对不同的role给与不同的class，进行样式设置。

<template>
  <div class="robot-wrap">
    <span class="el-icon-close" @click="closeRobot"></span>
    <div class="robot-title">
      <div class="icon-hg-robot" @click="introduceShow = !introduceShow"></div>
      <div class="robot-tip" v-if="introduceShow">有什么能帮到您的吗？</div>
    </div>
    <div class="robot-text" v-if="introduceShow">
      <div>您可以这样问我</div>
      <div v-for="(item, index) in questions" :key="index" class="question-item">
        <div class="item-icon"><span :class="item.icon"></span></div>
        <div>
          <div class="item-name">{{item.name}}</div>
          <div class="item-describe">"{{item.describe}}"</div>
        </div>
      </div>
    </div>
    <div class="message-wrap">
      <div v-for="(item, index) in messageList" :key="index" class="message-q" :class="[item.role === 'robot' ? 'left' : 'right']" @click="jumpTo(item)">
        <el-table :data="item.dialogue.listData" v-if="item.type === 'LIST' || item.type === 'COMPARE'" class="table-cell-center table-cell-nowrap">
          <template slot="empty">
            <img src="@/assets/hg-result-background.png" alt="">
          </template>
          <el-table-column
            type="index"
            v-if="item.type === 'LIST'"
            width="30">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in item.dialogue.listHeader"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            min-width="200">
            <template slot-scope="scope">
              <span :title="`${scope.row[item.prop]}:点击查看详情`" @click="toDetail(scope.row)">{{scope.row[item.prop]}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-else-if="item.type === 'UNKNOWN'">
          <div v-for="(list, ind) in item.dialogue" :key="ind" @dblclick="clickList(list)" title="双击进行查看">{{list}}</div>
        </div>
        <div v-html="item.dialogue" v-else></div>
      </div>
    </div>
    <div class="robot-input" v-if="showInput">
      <el-input v-model="robotInput" placeholder="请输入关键字" suffix-icon="" @change="inputSearch">
        <i
          class="icon-wheat"
          slot="suffix"
        @click="voiceSearch"
        v-show="speechVisible">
        </i>
      </el-input>
      <el-button v-show="!speechVisible" @click="inputSearch">发送</el-button>
    </div>
    <div v-else class="listen-wrap" @click="stopRec()">
      <div>请继续，点击结束...</div>
      <div><span class="icon-listen"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { qaChatApi, voiceChatApi } from '@/api/user';
import recording from '../../utils/recorder';
export default {
  props: [],
  name: '',
  data () {
    return {
      questions: [
        {
          icon: 'icon-hammer',
          name: '直接型',
          describe: '这个系统是做什么的？'
        },
        {
          icon: 'icon-hammer',
          name: '指令型',
          describe: '查看甲醛的详情页'
        },
        {
          icon: 'icon-hammer',
          name: '跳转型',
          describe: '跳转到后台管理页面'
        },
      ],
      robotInput: '',
      messageList: [],
      answerList: [],
      introduceShow: true,
      showInput: true,
      qaResult: {},
      audioUrl: null,
      recorder: null,
      speechVisible: true, // 语音按钮是否显示
    };
  },
  watch: {
    messageList (val) {
      if (val.length > 2) {
        this.introduceShow = false;
      }
    },
    robotInput (val) {
      if (!val) {
        this.speechVisible = true;
      }
    }
  },
  mounted () {
    // 初始化开启录音权限
    this.$nextTick(() => {
      recording.get(rec => {
        this.recorder = rec;
      });
    });
  },
  methods: {
    // unknown类型点击
    clickList (item) {
      this.robotInput = item;
      this.inputSearch();
    },
    // 开始录音
    voiceSearch () {
      this.showInput = false;
      this.recorder.start();
      this.robotInput = '';
    },
    // 结束录音
    stopRec () {
      this.recorder.stop();
      const bold = this.recorder.getBlob();
      this.audioUrl = new File([bold], 'question.wav', {type: 'audio/wav', lastModified: Date.now()});
      let formData = new FormData();
      formData.append('file', this.audioUrl);
      console.log(formData);
      voiceChatApi(formData).then(res => {
        this.robotInput = res.data.data.speech;
        this.speechVisible = false;
      });
      this.showInput = true;
    },
    closeRobot () {
      this.$emit('close');
    },
    toDetail (item) {
      this.$router.push({ path: `/home/detail/${item.node}?nodeId=${item.nodeId}` });
    },
    inputSearch () {
      qaChatApi({
        text: this.robotInput
      }).then(res => {
        this.qaResult = res.data.data;
        if (this.qaResult.type === 'JUMP') { // 类型-跳转型
          this.messageList.push({
            dialogue: '...',
            role: 'robot',
            type: 'JUMP',
            page: this.qaResult.page
          });
          this.jumpTo(res.data.data);
        } else if (this.qaResult.type === 'ORDER') { // 类型-指令型
          this.messageList.push({
            dialogue: '...',
            role: 'robot',
            type: 'ORDER'
          });
          const typeArr = ['CHEMICAL', 'COMPANY', 'ACCIDENT', 'DANGER-SOURCE', 'CRAFT'];
          if (this.qaResult.ontologyType && typeArr.includes(this.qaResult.ontologyType)) {
            this.$router.push({ path: `/home/detail/${this.qaResult.ontologyType}?nodeId=${this.qaResult.result}` });
          } else {
            this.$router.push({ path: `/home/detail/CHEMICAL?nodeId=${this.qaResult.result}` });
          }
        } else if (this.qaResult.type === 'LIST') { // 类型-列表型
          if (this.qaResult.total > 0) {
            this.messageList.push({
              dialogue: `系统查询结果计数为${this.qaResult.total},如表所示：`,
              role: 'robot',
            });
            this.messageList.push({
              dialogue: {
                listHeader: [
                  {
                    label: this.qaResult.list.length ? this.qaResult.list[0].filter(i => i.key !== 'node' && i.key !== 'nodeId')[0].key : '',
                    prop: this.qaResult.list.length ? this.qaResult.list[0].filter(i => i.key !== 'node' && i.key !== 'nodeId')[0].key : '',
                  }
                ],
                listData: this.qaResult.list.map((i, k) => {
                  const obj = {};
                  i.forEach(v => {
                    obj[v.key] = v.value;
                  });
                  return obj;
                })
              },
              role: 'robot',
              type: 'LIST'
            });
          } else {
            this.messageList.push({
              dialogue: '系统查询结果为零',
              role: 'robot',
            });
          }
        } else if (this.qaResult.type === 'RESULT') { // 类型-结果型
          this.messageList.push({
            dialogue: this.qaResult.result,
            role: 'robot',
            type: 'RESULT'
          });
        } else if (this.qaResult.type === 'STATISTICS') { // 类型-统计型
          this.messageList.push({
            dialogue: this.qaResult.total,
            role: 'robot',
            type: 'STATISTICS'
          });
        } else if (this.qaResult.type === 'COMPARE') { // 类型-比较型
          if (this.qaResult.value.length > 0) {
            this.messageList.push({
              dialogue: `比较结果如下：`,
              role: 'robot',
            });
            this.messageList.push({
              dialogue: {
                listHeader: this.qaResult.value[0].filter(i => i.key !== 'node' && i.key !== 'nodeId').map(i => ({
                  label: i.key,
                  prop: i.key
                })),
                listData: this.qaResult.value.map((i, k) => {
                  const obj = {};
                  i.forEach(v => {
                    obj[v.key] = v.value;
                  });
                  return obj;
                })
              },
              role: 'robot',
              type: 'COMPARE'
            });
          } else {
            this.messageList.push({
              dialogue: '无结果',
              role: 'robot',
            });
          }
        } else if (this.qaResult.type === 'JUDGMENT') { // 类型-对错型
          this.messageList.push({
            dialogue: this.qaResult.judgment,
            role: 'robot',
            type: 'JUDGMENT'
          });
        } else if (this.qaResult.type === 'UNKNOWN') { // 类型-未知型
          this.messageList.push({
            dialogue: '小智不知，您可以这样问：',
            role: 'robot',
          });
          this.messageList.push({
            // dialogue: this.qaResult.demo.join().replace(/,/g, '</br>'),
            dialogue: this.qaResult.demo,
            role: 'robot',
            type: 'UNKNOWN'
          });
        } else if (this.qaResult.type === 'INTRODUCE') {
          this.messageList.push({
            dialogue: this.qaResult.introduce,
            role: 'robot',
            type: 'INTRODUCE'
          });
        }
      });
      this.messageList.push({
        dialogue: this.robotInput,
        role: 'user',
        type: 'user'
      });
      this.robotInput = '';
    },
    jumpTo (item) {
      if (item.page) {
        this.$router.push({ path: item.page });
      }
    },
  }
};
</script>

<style scoped>

</style>

其中：right的样式为：

.robot-wrap .message-wrap .message-q.right {
    -ms-flex-item-align: end;
    align-self: flex-end;
    border-radius: 10px 10px 0 10px;
    background-color: #00cdcf;
    color: #071b3e;
}

语音记录的recorder为（可以直接建立recorder.js，复制后直接调用）：

// 兼容
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
let HZRecorder = function (stream, config) {
  config = config || {};
  config.sampleBits = config.sampleBits || 8; // 采样数位 8, 16
  config.sampleRate = config.sampleRate || (44100 / 6); // 采样率(1/6 44100)
  let context = new (window.webkitAudioContext || window.AudioContext)();
  let audioInput = context.createMediaStreamSource(stream);
  let createScript = context.createScriptProcessor || context.createJavaScriptNode;
  let recorder = createScript.apply(context, [4096, 1, 1]);
  let audioData = {
    size: 0, // 录音文件长度
    buffer: [], // 录音缓存
    inputSampleRate: context.sampleRate, // 输入采样率
    inputSampleBits: 16, // 输入采样数位 8, 16
    outputSampleRate: config.sampleRate, // 输出采样率
    oututSampleBits: config.sampleBits, // 输出采样数位 8, 16
    input: function (data) {
      this.buffer.push(new Float32Array(data));
      this.size += data.length;
    },
    clearData: function () {
      this.buffer = [];
      this.size = 0;
    },
    compress: function () { // 合并压缩
      // 合并
      let data = new Float32Array(this.size);
      let offset = 0;
      for (let i = 0; i < this.buffer.length; i++) {
        data.set(this.buffer[i], offset);
        offset += this.buffer[i].length;
      }
      // 压缩
      let compression = parseInt(this.inputSampleRate / this.outputSampleRate);
      let length = data.length / compression;
      let result = new Float32Array(length);
      let index = 0; let j = 0;
      while (index < length) {
        result[index] = data[j];
        j += compression;
        index++;
      }
      return result;
    },
    encodeWAV: function () {
      let sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
      let sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
      let bytes = this.compress();
      let dataLength = bytes.length * (sampleBits / 8);
      let buffer = new ArrayBuffer(44 + dataLength);
      let data = new DataView(buffer);
      let channelCount = 1;// 单声道
      let offset = 0;
      let writeString = function (str) {
        for (let i = 0; i < str.length; i++) {
          data.setUint8(offset + i, str.charCodeAt(i));
        }
      };
      // 资源交换文件标识符
      writeString('RIFF'); offset += 4;
      // 下个地址开始到文件尾总字节数,即文件大小-8
      data.setUint32(offset, 36 + dataLength, true); offset += 4;
      // WAV文件标志
      writeString('WAVE'); offset += 4;
      // 波形格式标志
      writeString('fmt '); offset += 4;
      // 过滤字节,一般为 0x10 = 16
      data.setUint32(offset, 16, true); offset += 4;
      // 格式类别 (PCM形式采样数据)
      data.setUint16(offset, 1, true); offset += 2;
      // 通道数
      data.setUint16(offset, channelCount, true); offset += 2;
      // 采样率,每秒样本数,表示每个通道的播放速度
      data.setUint32(offset, sampleRate, true); offset += 4;
      // 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8
      data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;
      // 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8
      data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
      // 每样本数据位数
      data.setUint16(offset, sampleBits, true); offset += 2;
      // 数据标识符
      writeString('data'); offset += 4;
      // 采样数据总数,即数据总大小-44
      data.setUint32(offset, dataLength, true); offset += 4;
      // 写入采样数据
      if (sampleBits === 8) {
        for (let i = 0; i < bytes.length; i++, offset++) {
          let s = Math.max(-1, Math.min(1, bytes[i]));
          let val = s < 0 ? s * 0x8000 : s * 0x7FFF;
          val = parseInt(255 / (65535 / (val + 32768)));
          data.setInt8(offset, val, true);
        }
      } else {
        for (let i = 0; i < bytes.length; i++, offset += 2) {
          let s = Math.max(-1, Math.min(1, bytes[i]));
          data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
        }
      }
      return new Blob([data], { type: 'audio/mp3' });
    }
  };
  // 开始录音
  this.start = function () {
    audioInput.connect(recorder);
    recorder.connect(context.destination);
    audioData.clearData();
  };
  // 停止
  this.stop = function () {
    recorder.disconnect();
  };
  // 获取音频文件
  this.getBlob = function () {
    this.stop();
    return audioData.encodeWAV();
  };
  // 回放
  this.play = function (audio) {
    let downRec = document.getElementById('downloadRec');
    downRec.href = window.URL.createObjectURL(this.getBlob());
    downRec.download = new Date().toLocaleString() + '.mp3';
    audio.src = window.URL.createObjectURL(this.getBlob());
  };
  // 上传
  this.upload = function (url, callback) {
    let fd = new FormData();
    fd.append('audioData', this.getBlob());
    let xhr = new XMLHttpRequest();
    /* eslint-disable */
    if (callback) {
      xhr.upload.addEventListener('progress', function (e) {
        callback('uploading', e)
      }, false);
      xhr.addEventListener('load', function (e) {
        callback('ok', e)
      }, false);
      xhr.addEventListener('error', function (e) {
        callback('error', e)
      }, false);
      xhr.addEventListener('abort', function (e) {
        callback('cancel', e)
      }, false)
    }
    /* eslint-disable */
    xhr.open('POST', url);
    xhr.send(fd)
  };
  // 音频采集
  recorder.onaudioprocess = function (e) {
    audioData.input(e.inputBuffer.getChannelData(0))
    // record(e.inputBuffer.getChannelData(0));
  }
};
// 抛出异常
HZRecorder.throwError = function (message) {
  alert(message);
  throw new function () { this.toString = function () { return message } }()
};
// 是否支持录音
HZRecorder.canRecording = (navigator.getUserMedia != null);
// 获取录音机
HZRecorder.get = function (callback, config) {
  if (callback) {
    if (navigator.getUserMedia) {
      navigator.getUserMedia(
        { audio: true } // 只启用音频
        , function (stream) {
          let rec = new HZRecorder(stream, config);
          callback(rec)
        }
        , function (error) {
          switch (error.code || error.name) {
            case 'PERMISSION_DENIED':
            case 'PermissionDeniedError':
              HZRecorder.throwError('用户拒绝提供信息。');
              break;
            case 'NOT_SUPPORTED_ERROR':
            case 'NotSupportedError':
              HZRecorder.throwError('浏览器不支持硬件设备。');
              break;
            case 'MANDATORY_UNSATISFIED_ERROR':
            case 'MandatoryUnsatisfiedError':
              HZRecorder.throwError('无法发现指定的硬件设备。');
              break;
            default:
              HZRecorder.throwError('无法打开麦克风。异常信息:' + (error.code || error.name));
              break
          }
        })
    } else {
      HZRecorder.throwErr('当前浏览器不支持录音功能。'); return
    }
  }
};
export default HZRecorder