ahyd_DIB/pages/robot/index.vue

<template>
  <view class="main">
    <view class="dialogContentBox">
      <view :class="item.type===1?'item itemLeft':'item rightItem'" v-for="(item,index) in dialogueList" :key="index" :style="{marginTop: index!==0?'8px':''}">
        <text :id="'printBox' + index" :class="item.type===1?`dialogItem white`:`dialogItem green`">
          {{ item.text || '' }}
        </text>
      </view>

      <view class="loadingBox" v-if="isLoading">
        小驿分析中...
      </view>
    </view>


    <view class="inputBox">
      <textarea class="searchText" :value="searchText" @input="handleInput"/>
      <view class="searchBtn" @click="handleSubmit">
        发送
      </view>
    </view>
  </view>
</template>
<script >
import request from '@/util/index.js'
export default {
  data(){
    return {
      searchText:'',
      dialogueList:[],// 对话list  type 1 是居左 2 是居右
      printText:'',
      isLoading: false,// 是否加载中
    }
  },
  onLoad(){
    this.dialogueList.push({text:`您好！我是服务区商业智能助理小驿。\n您想了解服务区哪些方面的信息？`,type:1})
    this.handlePrintText()
    // this.printText = `您好！我是服务区商业智能助理小驿。<br>您想了解服务区哪些方面的信息？`
  },
  methods:{
    handleSubmit(){
      let list = this.dialogueList
      console.log('this.searchText',this.searchText)
      if(this.searchText){
        list.push({text:this.searchText,type:2})
        this.dialogueList = list
        this.$forceUpdate()
        this.handleGetData()
        this.searchText= ''
      }
    },
    // 输入框中的值
    handleInput(e){
      console.log('e',e)
      this.searchText = e.detail.value
    },
    // 查询的方法
    async handleGetData(){
      this.isLoading = true
      const data = await request.$webGet('CommercialApi/Analysis/TranslateSentence',{Sentence: this.searchText})
      console.log('data',data)
      if(data.Result_Code === 999){
        this.dialogueList.push({text:`'小驿还无法理解，请换个说法我会不停努力学习的！'`,type:1})
      }else{
        let str = data.Result_Data.RevenueAnalysis + '\n'
        let obj = data.Result_Data.ServerpartList
        if(obj){
          for(let key in obj){
            if(str){
              str+=`${key}：${this.formatNumber(obj[key].curYearData / 10000)}万元，同比${obj[key].increaseRate>0?'增幅':obj[key].increaseRate<0?'降幅':''}${obj[key].increaseRate ||''}\n`
            }else{
              str = `${key}：${this.formatNumber(obj[key].curYearData / 10000)}万元，同比${obj[key].increaseRate>0?'增幅':obj[key].increaseRate<0?'降幅':''}${obj[key].increaseRate || ''}\n`
            }
          }

        }


        this.dialogueList.push({text: str,type:1})
      }
      this.isLoading = false
    },
    // 打印机效果
    handlePrintText(){
      const query = wx.createSelectorQuery();
      const contentBox = query.select(`#printBox${this.dialogueList && this.dialogueList.length>0? this.dialogueList.length - 1:0}`)
      console.log('contentBox',contentBox)
    },
    formatNumber(num) {
      // 确保输入为数字类型
      num = Number(num);
      if (isNaN(num)) return '0.00'; // 处理无效数字
      // 将数字转换为字符串，并分离整数部分和小数部分
      let parts = num.toString().split('.');
      // 处理小数部分，不进行四舍五入，直接截取小数点后两位
      let decimalPart = parts[1] ? parts[1].substring(0, 2) : '00';
      if (decimalPart.length < 2) {
        decimalPart = decimalPart.padEnd(2, '0'); // 不足两位补零
      }
      // 格式化整数部分，添加千分号
      let integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      // 返回带千分号的整数部分和保留两位小数的数字
      return `${integerPart}.${decimalPart}`;
    }
  }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  height: 100vh;
  background: #f0f0f0;
  .dialogContentBox{
    width: 100%;
    height: calc(100vh - 90px);
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 12px;
    .item{
      display: flex;
      align-items: center;
      .dialogItem{
        display: block;
        max-width: 80vw;
        box-sizing: border-box;
        padding: 4px;
        border-radius: 4px;
      }
      .white{
        border: 1px solid #ccc;
        background: #fff;
        color: #000;
      }
      .green{
        background: #12A153FF;
        color: #fff;
      }
    }
    .itemLeft{
      justify-content: flex-start;
    }
    .rightItem{
      justify-content: flex-end;
    }
    .loadingBox{
      font-size: 12px;
      color: #ccc;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
  .inputBox{
    width: 100%;
    height: 80px;
    background: hsla(0,0%,97%,.98);
    border-top: 1px solid #ccc;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 0 8px 4px;
    display: flex;
    align-items: center;
    .searchText{
      background: #fff;
      flex: 1;
      height: 40px;
      box-sizing: border-box;
      border-radius: 8px;
      padding: 4px 8px 0;
      font-size: 14px;
    }
    .searchBtn{
      width: 80px;
      height: 40px;
      box-sizing: border-box;
      color: #fff;
      background: #07c160;
      border-radius: 4px;
      margin-left: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
  }
}
</style>