LQBZ_web/src/views/als/intelligentQA/index.vue

<template>
  <div class="intelligentQA">
    <div class="aside">历史记录</div>
    <div class="chat">
      <!-- <div class="header">Header</div> -->
      <div ref="main" class="main">
        <div class="chatLine">
          <div v-for="(item, index) in chatInfo" :key="index">
            <div class="chatRow" v-if="item.code === 200">
              <div class="answerData">
                <div class="answer">{{ item.data.answer }}</div>
                <!-- <div class="graph"></div> -->
                <graphECharts :graphData="item.data.graph" class="charts"></graphECharts>
              </div>
            </div>
            <div class="chatRow chatQ" v-if="item.userId">
              <div class="questionContent">{{ item.data }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footerContent">
          <textarea v-model="questionInput" :style="{ height: `${currentHeight}px`, overflowY: isScrollable ? 'auto' : 'hidden' }" placeholder="请输入您的问题..." @keydown="handleKeydown"> </textarea>
          <i class="el-icon-s-promotion icon" @click="sendQuestion"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import graphECharts from '@/views/als/components/Charts/graph.vue'

export default {
  name: 'IntelligentQA',
  components: { graphECharts },
  data() {
    return {
      userId: '',
      chatInfo: [],
      questionInput: '',
      currentHeight: 'auto',
      lastScrollHeight: 0,
      isScrollable: false
    }
  },
  mounted() {
    this.getUserInfo()
    this.adjustHeight()
  },
  watch: {},
  created() {},
  methods: {
    async getUserInfo() {
      const { user } = await store.dispatch('user/getUserInfo')
      this.userId = user.userId
    },
    adjustHeight() {
      const textarea = this.$el.querySelector('textarea')
      this.currentHeight = 'auto'
      if (textarea.scrollHeight < this.lastScrollHeight) {
        this.lastScrollHeight = this.lastScrollHeight - 16
      }
      this.$nextTick(() => {
        this.currentHeight = Math.min(this.lastScrollHeight, 200)
        this.lastScrollHeight = textarea.scrollHeight
        if (textarea.scrollHeight >= 200) {
          this.isScrollable = true
        } else {
          this.isScrollable = false
        }
      })
    },
    handleKeydown(event) {
      if (event.key === 'Enter') {
        // 检查是否按下了 Ctrl 键
        if (event.ctrlKey) {
          // 按下了 Ctrl+Enter，则插入换行符
          this.questionInput += '\n'
          this.adjustHeight()
        } else {
          // 只是按下了 Enter，阻止默认行为并发送消息
          event.preventDefault()
          this.sendQuestion()
        }
      }
      if (event.key === 'Backspace') {
        if (this.questionInput) {
          this.adjustHeight()
        } else {
          this.currentHeight = '50'
        }
      }
    },
    sendQuestion() {
      console.log('222', this.questionInput.trim())
      if (this.questionInput.trim() === '') {
        return
      }
      this.chatInfo.push(
        {
          data: this.questionInput,
          userId: this.userId
        },
        {
          code: 200,
          msg: '',
          data: {
            user_id: 'user',
            answer: '发生。。。。。。。xxxxxxx',
            graph: {
              data: [
                { name: '202310150010', category: 'HMC' },
                { name: '电视', category: '成品' },
                { name: '电视遥控器失灵', category: '故障描述' },
                { name: '家用电器', category: '系统' },
                { name: '更换电池或遥控器', category: '维修策略' }
              ],
              links: [
                { source: '202310150010', target: '电视', value: '成品' },
                { source: '202310150010', target: '电视遥控器失灵', value: '故障描述' },
                { source: '202310150010', target: '家用电器', value: '系统' },
                { source: '202310150010', target: '更换电池或遥控器', value: '维修策略' }
              ],
              categories: [{ name: 'HMC' }, { name: '成品' }, { name: '故障描述' }, { name: '维修策略' }, { name: '系统' }]
            }
          }
        }
      )
      // data: [
      //           { name: '111', category: 'HMC' },
      //           { name: '更换手机屏幕', category: '维修策略' }
      //         ],
      //         links: [{ source: '111', target: '更换手机屏幕', value: '维修策略' }],
      //         categories: [{ name: 'HMC' }, { name: '维修策略' }]
      console.log('this.chatInfo', this.chatInfo)
      this.questionInput = ''
      // 等处理过返回数据后，调用使视图保持在最底部
      let main = this.$refs.main
      setTimeout(() => {
        main.scrollTop = main.scrollHeight
      }, 0)
    },
    showGraph(graphData) {
      const { data, links } = graphData
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>