logpm_page/src/page/login/aiqa.vue

<template>
  <div class="page-content">
    <div class="header">
      <div class="logo">
        <img :src="logo" />
        <span>货无忧AI智能问答</span>
      </div>
      <div class="icon-box">
        <el-icon @click="close"><CloseBold /></el-icon>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="content-box" ref="chatContainer">
          <div class="content-time">{{ time }}</div>
          <template v-for="(item, index) in Data.ChathistoryList" :key="index">
            <div
              :class="{
                'chat-history': item.state === 'Ai',
                'chat-history-user': item.state === 'user',
              }"
            >
              <div class="icon">
                <el-icon v-if="item.state === 'user'"><Avatar /></el-icon>
                <img v-else :src="logotx" />
              </div>
              <div>
                <div
                  :class="{
                    'content-header': item.state === 'Ai',
                    'content-header-user': item.state === 'user',
                  }"
                >
                  <span>{{ item.name }}</span>
                  <!-- <span>{{ item.time }}</span> -->
                </div>
                <div class="content-list">
                  <p :ref="el => (chatContents[index] = el)">
                    {{ item.state === 'user' ? item.content : '' }}
                  </p>
                  <!-- 图片  -->
                  <el-image
                    v-if="item.url"
                    style="width: 100px; height: 100px"
                    :src="item.url"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="item.srcList"
                    :initial-index="4"
                    fit="cover"
                  />
                  <!-- 下载地址 -->
                  <a v-if="item.link" :href="item.link" target="_blank" rel="noopener noreferrer">
                    <el-link :underline="false">点击这里下载</el-link></a
                  >
                </div>
              </div>
            </div>
          </template>
        </div>
        <!-- 输入框  -->
        <div class="content-input">
          <el-input
            ref="input"
            @keydown.enter="inputData(Data.input)"
            v-model="Data.input"
            placeholder="请输入问题描述"
            type="textarea"
            style="height: 100%; resize: none"
          />
          <el-button type="primary" @click="inputData(Data.input)">发送</el-button>
        </div>
      </div>
      <div class="right">
        <el-tabs type="border-card">
          <el-tab-pane label="热点问题">
            <div class="el_problem">
              <template v-for="(item, index) in Data.problem" :key="index">
                <div class="box">
                  <span :class="{ span: true, [`id${index + 1}`]: index < 4 }">{{
                    index + 1
                  }}</span>
                  <span class="spancontent" @click="inputData(item.content)"
                    >{{ item.content }}...
                  </span>
                </div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="新增问题"> 暂无新增问题 </el-tab-pane>
          <el-tab-pane label="快捷服务"> 待添加 </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, nextTick, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import Qrxcx from '../../../public/img/Qrxcx.png'; //小程序二维码
import Qrewm from '../../../public/img/Qrewm.png'; //APP二维码
import logo from '../../../public/img/kflogo.png'; //logo
import logotx from '../../../public/img/logo3.png'; //logo
const emit = defineEmits(['request-data']);
const isFirstMessage = ref(true);
const chatContainer = ref(null);
const inputState = ref(false); //当前是否在回答
const props = defineProps({
  templateData: Boolean,
});
const input = ref(null); //输入框实例
const Data = ref({
  name: '', //用户名
  ai: false,
  //   热门问题
  problem: [
    {
      content: '货无忧小程序地址',
    },
    {
      content: '货无忧App下载地址',
    },
    {
      content: '打印机驱动下载地址',
    },
    {
      content: '扫描仪驱动下载地址',
    },
    {
      content: '扫描仪出现问题如何解决',
    },
    {
      content: '谷歌浏览器下载地址',
    },
    {
      content: '东集pad安装初始密码是什么',
    },
    {
      content: '东集pad-q7恢复出厂设置',
    },
    // {
    //   content: '货无忧的汇通物流公司编码是多少',
    // },
    {
      content: '蓝牙打印机芝柯tx453设备连接密码是多少',
    },
    {
      content: '向日葵下载地址',
    },
  ],
  ChathistoryList: [
    // {
    //   // url:'图片地址',//图片预览地址
    //   // srcList:[],//图片列表
    //   // state: 'user', //用户标识
    //   // name: '用户', //用户昵称
    //   // content: value, //聊天消息
    //   // time: setCurrentTime(),//时间
    // },
  ],
  input: '', //输入框
});

const close = () => {
  emit('request-data', Data.value);
};
// 在 setup 函数或组件方法中
const getLocalStorageItem = key => {
  return localStorage.getItem(key);
};
const getuserinfo = () => {
  // 使用
  const LOCA_USER = JSON.parse(getLocalStorageItem('TWMS-userInfo'));
  console.log(LOCA_USER, 'LOCA_USER');
  if (LOCA_USER) {
    Data.value.name = LOCA_USER.content.real_name;
  }
};
getuserinfo();
const chatContents = ref([]);

const typeText = (element, text, delay = 50) => {
  if (!element) return;
  element.innerText = '';
  let index = 0;

  const type = () => {
    if (index < text.length) {
      element.innerText += text.charAt(index);
      index++;
      setTimeout(type, delay);
    }
  };

  type();
};
// 页面滚动
const scrollToBottom = () => {
  setTimeout(() => {
    const container = chatContainer.value;
    if (container) {
      container.scrollTop = container.scrollHeight;
    }
  }, 0);
};
// 时间
const setCurrentTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
};

const time = computed(() => {
  return setCurrentTime();
});
// 用户输入逻辑
const inputData = value => {
  Data.value.input = value;
  console.log(value, 'value');
  // 如果没有值或者正在进行中终止程序
  if (!Data.value.input) {
    ElMessage({
      message: '请输入问题描述',
      type: 'warning',
    });
    return;
  }
  let data = {
    state: 'user', //用户标识
    name: Data.value.name || '未登录', //用户昵称
    content: value, //聊天消息
    time: setCurrentTime(),
  };
  Data.value['ChathistoryList'].push(data);
  Data.value.input = ''; // 清空输入框
  input.value.focus();
  inputState.value = false;
  AiData(value); //调用AI机器人判断
};
//AiData 函数
const AiData = (value = '') => {
  let aiResponse = '';
  let data = {
    url: '', //图片预览地址
    srcList: [], //图片列表
    state: 'Ai', //机器人标识
    name: '货无忧智能AI', //昵称
    content: aiResponse, //文本描述
    link: '', //文件下载地址
    time: setCurrentTime(), //日期
  };

  if (isFirstMessage.value) {
    aiResponse = '你好，我是货无忧智能AI，有什么可以帮助您的吗？';
    isFirstMessage.value = false;
  } else {
    const lowercaseValue = value.toLowerCase();
    if (
      lowercaseValue.includes('小程序') ||
      lowercaseValue.includes('小程序地址') ||
      lowercaseValue.includes('货无忧小程序地址')
    ) {
      aiResponse = '货无忧小程序如下，扫描图片既可以访问';
      data.url = Qrxcx;
      data.srcList = [Qrxcx];
    } else if (
      lowercaseValue.includes('你好') ||
      lowercaseValue.includes('你是谁') ||
      lowercaseValue.includes('你叫什么名字')
    ) {
      aiResponse =
        '您好,我是货无忧智能AI，有什么可以帮助您的吗?可以尝试输入关键字，如：小程序、app、打印驱动、扫描仪驱动或者点击右侧问题进行提问。';
    } else if (
      lowercaseValue.includes('app') ||
      lowercaseValue.includes('app下载') ||
      lowercaseValue.includes('货无忧App下载地址')
    ) {
      aiResponse = '货无忧app如下，打开浏览器扫描二维码，就可以下载';
      data.url = Qrewm;
      data.srcList = [Qrewm];
    } else if (
      lowercaseValue.includes('打印驱动') ||
      lowercaseValue.includes('打印机驱动下载地址')
    ) {
      aiResponse = '打印机启动下载地址如下：';
      data.link = 'http://8.137.19.41:9000/logpm/other/CLodop_Setup_for_Win32NT.exe';
    } else if (
      lowercaseValue.includes('扫描仪驱动') ||
      lowercaseValue.includes('扫描仪驱动下载地址')
    ) {
      aiResponse = '扫描仪驱动如下：';
      data.link = 'http://files.huo5u.com/plugins/WebCamera_V1.3.7.exe';
    } else if (
      lowercaseValue.includes('扫描仪') ||
      lowercaseValue.includes('扫描仪出现问题如何解决')
    ) {
      aiResponse =
        '扫描仪出现问题需要复制如下地址，然后打开谷歌浏览器在浏览器地址中输入这个地址：chrome://flags/#block-insecure-private-network-requests ,把黄色部分选择Disabled然后重启浏览器,或者检查驱动是否启动，线束是否连接完整';
    } else if (
      lowercaseValue.includes('扫描仪报错') ||
      lowercaseValue.includes('扫描仪报错如何解决')
    ) {
      aiResponse =
        '扫描仪出现问题需要复制如下地址，然后打开谷歌浏览器在浏览器地址中输入这个地址：chrome://flags/#block-insecure-private-network-requests ,把黄色部分选择Disabled然后重启浏览器';
    } else if (lowercaseValue.includes('谷歌') || lowercaseValue.includes('谷歌浏览器下载地址')) {
      aiResponse = '谷歌浏览器下载地址如下：';
      data.link = 'https://www.google.cn/intl/zh-CN/chrome/?';
    } else if (
      lowercaseValue.includes('东集pda初始密码') ||
      lowercaseValue.includes('东集pad安装初始密码')
    ) {
      aiResponse = '东集PDA安装初始密码是：4007770876';
    } else if (lowercaseValue.includes('东集pad-q7恢复出厂设置')) {
      aiResponse =
        '东集pad-q7恢复出厂设置教程地址:1、关机状态下，按下【电源键】、【两侧扫描键】； 2、出现开机画面，松开【电源键】，出现工厂模式界面，按键全部松开；3、进入工厂模式后通过方向键选择【wipe data/factory reset】, 按电源键确认进入子菜单，选择【yes】，按【电源键】确认，恢复出厂完成后选择第一个【reboot system now】 ，按【电源键】确认重启设备。视频教程如下:https://mp.weixin.qq.com/s/0CG-jYooh9LJ-9aLauVGfA';
    }
    // else if (
    //   lowercaseValue.includes('货无忧的汇通物流公司编码是多少')
    // ) {
    //   aiResponse = '货无忧的汇通物流公司编码是：627683';
    // }
    else if (
      lowercaseValue.includes('蓝牙打印机芝柯tx453设备连接密码是多少') ||
      lowercaseValue.includes('tx453')
    ) {
      aiResponse = '蓝牙打印机芝柯xt453设备连接密码是：0000';
    } else if (lowercaseValue.includes('向日葵') || lowercaseValue.includes('向日葵下载地址')) {
      aiResponse = '向日葵下载地址：https://sunlogin.oray.com/,使用教程点击下方立即下载';
      data.link =
        'http://files.huo5u.com/plugins/%E5%90%91%E6%97%A5%E8%91%B5%E8%BF%9C%E7%A8%8B%E8%BD%AF%E4%BB%B6%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B.docx';
    } else {
      aiResponse = '我不太理解您的问题，我正在努力学习中，请重新描述或输入其他问题，或联系管理员';
    }
  }

  data.content = aiResponse;
  Data.value['ChathistoryList'].push(data);
  nextTick(() => {
    const lastIndex = Data.value['ChathistoryList'].length - 1;
    const element = chatContents.value[lastIndex];
    typeText(element, aiResponse);
    scrollToBottom();
  });
};
AiData(); //初始化AI机器人
</script>

<style scoped lang="scss">
.el_problem {
  display: flex;
  flex-direction: column;
  span {
    margin: 4px;
  }
  .box {
    font-size: 14px;
    display: flex;
    height: 50px;

    align-items: center;
    .span {
      width: 20px;
      height: 20px;
      background-color: #9e9e9e;
      display: block;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
    }
    .spancontent {
      cursor: pointer;
    }
    .id1 {
      border: 1px solid #f45c45;
      background-color: #f45c45;
    }
    .id2 {
      border: 1px solid #ed9c43;
      background-color: #ed9c43;
    }
    .id3 {
      border: 1px solid #ffd35d;
      background-color: #ffd35d;
    }
  }
}
.page-content {
  width: 80%;
  height: 80%;
  border: 1px solid #9e9e9e;
  z-index: 9999999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .header {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #172e60;
    line-height: 40px;
    font-size: 16px;
    padding: 0 24px;
    .logo {
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
      }
      img {
        width: 30px;
        height: 30px;
      }
    }
    .icon-box {
      display: flex;

      .el-icon {
        color: #fff;
        font-size: 24px;
        &:hover {
          cursor: pointer;
          color: #ff0000;
        }
      }
    }
  }

  .content {
    flex: 1;
    color: #002e55;
    display: flex;
    justify-content: space-between;
    overflow-y: hidden;
    .left {
      width: 66%;
      border-right: 1px solid #d3832a;
      display: flex;
      flex-direction: column;

      .content-box {
        height: 70%;
        background-color: #f5f5f6;
        padding: 10px;
        overflow-y: scroll;
        .chat-history,
        .chat-history-user {
          margin-bottom: 2%;
          padding: 4px;
          display: flex;
          height: fit-content;

          .icon {
            min-width: 54px;
            min-height: 54px;
            max-width: 54px;
            max-height: 54px;
            border-radius: 50%;
            border: 1px solid #d3832a;
            margin-right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #d3832a;
            font-size: 3em;
            img {
              width: 100%;
              height: 100%;
            }
            .el-icon {
              font-size: 22px;
            }
          }

          .content-header {
            font-size: 12px;
            span {
              margin-right: 20px;
            }
          }

          .content-list {
            flex: 1;
            background-color: #fff;
            border: 1px solid #9e9e9e;
            padding: 0px 10px;
            border-radius: 4px;
            p {
              font-size: 13px;
              margin: 10px 0;
              // text-indent: 24px;
            }
          }
        }

        .chat-history-user {
          flex-direction: row-reverse;

          .icon {
            margin-right: 0;
            margin-left: 20px;
          }
          .content-header-user {
            font-size: 12px;
            text-align: right;
            display: flex;
            flex-direction: row-reverse;
            span {
              margin-left: 20px;
            }
          }
        }
      }

      :deep(.content-input) {
        border-top: 1px solid #c2c2c2;
        flex: 1;
        position: relative;
        .el-input {
          width: 100%;
          height: 100%;
          font-size: 16px;
        }

        .el-textarea__inner {
          height: 100%;
          box-shadow: none;
          resize: none;
        }

        .is-focus {
          box-shadow: none;
        }
        .el-input__wrapper {
          box-shadow: none;
        }
        .el-input__inner {
          font-size: 12px;
        }
        .el-button {
          position: absolute;
          right: 10px;
          bottom: 10px;
          width: 120px;
          height: 35px;
          background-color: #172e60;
          border: none;
        }
      }
    }

    .right {
      height: 100%;
      width: 34%;
      .el-tabs {
        height: 100%;

        .el-tabs__header,
        .el-tabs__content {
          width: 100%;
          overflow-y: scroll;
        }
      }
    }
  }
}
.content-time {
  text-align: center;
  color: #9a9a9a;
  font-size: 12px;
}
</style>