[Wip 0000] 可配置首页添加AI对话模块DEMO

src/views/vent/deviceManager/configurationTable/types.ts

@@ -88,6 +88,7 @@ export interface ModuleData {
         | 'blast_delta'
         | 'measure_detail'
         | 'qh_curve'
+        | 'ai_chat'
         | 'device_alarm';
       /** 分区大小 */
       basis: string;

src/views/vent/home/configurable/components/content.vue

@@ -67,6 +67,9 @@
         <template v-if="config.name === 'qh_curve'">
           <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
         </template>
+        <template v-if="config.name === 'ai_chat'">
+          <AIChat class="content__module" />
+        </template>
         <template v-if="config.name === 'device_alarm'">
           <DeviceAlarm class="content__module" :devicedata="config.data" />
         </template>
@@ -113,6 +116,7 @@
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
   import QHCurve from './preset/QHCurve.vue';
   import MeasureDetail from './preset/MeasureDetail.vue';
+  import AIChat from './preset/AIChat.vue';
   import DeviceAlarm from './preset/DeviceAlarm.vue';
   // import FIreWarn from './preset/FIreWarn.vue';
   // import FIreControl from './preset/FIreControl.vue';
@@ -342,19 +346,25 @@
     width: 5px !important;
   }
 
-  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
     /* background-color: transparent; */
     color: #fff;
   }
-  ::v-deep .zxm-select-arrow {
+  :deep(.zxm-select-arrow) {
     color: #fff;
   }
-  ::v-deep .zxm-select-selection-item {
+  :deep(.zxm-select-selection-item) {
     color: #fff !important;
   }
-  ::v-deep .zxm-select-selection-placeholder {
+  :deep(.zxm-select-selection-placeholder) {
     color: #fff !important;
   }
+  :deep(.dialog-overlay) {
+    width: 100%;
+    height: 100%;
+    position: unset;
+    box-shadow: unset;
+  }
 
   ::-webkit-scrollbar {
     width: 5px !important;

src/views/vent/home/configurable/components/preset/AIChat.vue

@@ -0,0 +1,496 @@
+<template>
+  <div class="dialog-overlay">
+    <!-- 左侧折叠区域 -->
+    <div class="left-side" :class="{ collapsed: isFold }" id="leftSide">
+      <div
+        class="addBtn"
+        :style="{
+          backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/add.svg' : ''})`,
+          backgroundColor: isFold ? '' : '#2cb6ff',
+          width: isFold ? '20px' : 'auto',
+        }"
+      >
+        <span
+          class="btn-text-bg"
+          :style="{
+            backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/addB.svg' : ''})`,
+          }"
+        ></span>
+        <span v-if="!isFold" class="btn-text" @click="addNew">添加新对话</span>
+      </div>
+      <div class="divider0"></div>
+      <div
+        v-if="isFold"
+        class="historyBtn"
+        :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/history.svg' : '/src/assets/images/vent/home/history.svg'})` }"
+        @click="addNew"
+      ></div>
+      <div v-else class="historyBtn1">
+        <span
+          class="btn-text-bg"
+          :style="{
+            backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/history.svg' : ''})`,
+          }"
+        ></span>
+        <span v-if="!isFold" class="btn-text">历史对话</span>
+        <a-list style="width: 100px" :split="false">
+          <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
+            >历史数据1</a-list-item
+          >
+          <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
+            >历史数据12</a-list-item
+          >
+          <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
+            >历史数据123</a-list-item
+          >
+        </a-list>
+      </div>
+      <div
+        class="foldBtn"
+        :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/Fold.svg' : '/src/assets/images/vent/home/unfold.svg'})` }"
+        @click="fold"
+      ></div>
+    </div>
+    <!-- 右侧对话框 -->
+    <div class="right-side">
+      <div class="input-content">
+        <!-- 对话区域 -->
+        <div class="dialog-area">
+          <div v-for="message in sortedMessages" :key="message.id" :class="['message-item', message.type]">
+            <!-- 用户提问样式 -->
+            <div v-if="message.type === 'user'" class="ask-message">
+              <span>{{ message.content }}</span>
+            </div>
+
+            <!-- 系统回答样式 -->
+            <div v-else class="system-message">
+              <div class="answerIcon"></div>
+              <div class="answer-message">
+                <div>
+                  <span>{{ message.content }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 文本输入区域 -->
+        <div v-if="spinning" class="thinking-area">
+          <span style="color: #fff">思考中···</span>
+          <a-spin :spinning="spinning"></a-spin>
+        </div>
+        <div class="input-area">
+          <textarea v-model="inputText" placeholder="请输入你的问题"> </textarea>
+          <!-- 底部操作栏 -->
+          <div class="action-bar">
+            <!-- 文件上传按钮 -->
+            <label class="upload-btn">
+              <div class="send-file" />
+              <span class="divider"> | </span>
+              <div class="send-img" />
+            </label>
+            <!-- 发送按钮 -->
+            <div class="send-btn" @click="handleSend"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, nextTick, computed } from 'vue';
+  // 响应式变量声明
+  const dialogVisible = ref(true);
+  const isFold = ref(true); // 是否折叠
+  const inputText = ref(''); // 输入框内容
+  // const messages = ref([]); // 消息列表
+  const spinning = ref(false); // 加载状态
+  const systemMessage = ref(''); // 系统返回信息
+  const session_id = ref(''); // 会话id
+  const hasCreated = ref(false); // 标志位，防止重复调用create接口
+
+  type MessageItem = {
+    id: string; // 唯一标识（可用时间戳生成）
+    type: 'user' | 'system';
+    content: string;
+    timestamp: number; // 排序依据
+  };
+
+  const messageList = ref<MessageItem[]>([]);
+  const sortedMessages = computed(() => {
+    return messageList.value.sort((a, b) => a.timestamp - b.timestamp);
+  });
+  // const scrollToBottom = () => {
+  //   nextTick(() => {
+  //     const container = document.querySelector('.dialog-area');
+  //     container.scrollTop = container.scrollHeight;
+  //   });
+  // };
+  const fold = () => {
+    isFold.value = !isFold.value;
+  };
+  async function addNew() {
+    let response = await fetch('http://182.92.126.35:6005/sessions/create', {
+      method: 'post',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    const data = await response.json();
+    session_id.value = data.session_id;
+  }
+  //获取消息列表
+  async function handleSend() {
+    spinning.value = true;
+    // 添加用户消息
+    messageList.value.push({
+      id: `user_${Date.now()}`,
+      type: 'user',
+      content: inputText.value,
+      timestamp: Date.now(),
+    });
+    // 调用接口获取答案
+    // const answer = await fetchAnswerFromAPI(question);
+    const params = {
+      chat_session_id: session_id.value,
+      prompt: inputText.value,
+      ref_file_ids: [],
+      thinking_enabled: false,
+    };
+    inputText.value = ''; // 清空输入框
+    //将用户输入的内容发送到后端
+    let response = await fetch('http://182.92.126.35:6005/chat', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(params),
+    });
+    const data = await response.json();
+    const assistantReply = data.reply; // 获取助手回复
+    systemMessage.value = assistantReply;
+    // 添加系统回答
+    messageList.value.push({
+      id: `system_${Date.now()}`,
+      type: 'system',
+      content: systemMessage.value,
+      timestamp: Date.now(),
+    });
+    spinning.value = false;
+  }
+  // async function handleSend() {
+  //   spinning.value = true;
+  //   userMessage.value.push({
+  //     msg: inputText.value, // 消息内容
+  //   });
+  //   inputText.value = ''; // 清空输入框
+  //   const params = {
+  //     messages: [{ role: 'user', content: inputText.value }],
+  //   };
+  //   //将用户输入的内容发送到后端
+  //   let response = await fetch('http://182.92.126.35:6005/chat', {
+  //     method: 'POST',
+  //     headers: {
+  //       'Content-Type': 'application/json',
+  //     },
+  //     body: JSON.stringify(params),
+  //   });
+  //   const data = await response.json();
+  //   spinning.value = false;
+  //   const assistantReply = data.reply; // 获取助手回复
+  //   systemMessage.value = assistantReply;
+  // }
+  // 初始化按钮定位
+  onMounted(() => {
+    addNew();
+  });
+</script>
+
+<style lang="less" scoped>
+  @keyframes menuShow {
+    0% {
+      width: 0;
+      height: 0;
+    }
+    100% {
+      width: 480px;
+      height: 100vh;
+    }
+  }
+  .trigger-button {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1000000;
+    .icon {
+      width: 60px;
+      height: 60px;
+      position: relative;
+      background-image: url('/@/assets/images/vent/home/wakeBtn.png');
+      background-position: center;
+      background-size: 100% 100%;
+    }
+  }
+  .dialog-overlay {
+    width: 32%;
+    height: 55%;
+    z-index: 999;
+    display: flex;
+    position: fixed;
+    right: 90px;
+    bottom: 20px;
+    box-shadow: 0 0 3px 3px #1074c1;
+    background-color: #09172c;
+  }
+
+  /* 遮罩层淡入淡出 */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  /* 弹窗缩放动画 */
+  .scale-enter-active,
+  .scale-leave-active {
+    transition: all 0.3s ease;
+  }
+  .scale-enter-from {
+    transform: scale(0.5) translate(-50%, -50%);
+    opacity: 0;
+  }
+  .scale-leave-to {
+    transform: scale(1.2) translate(-50%, -50%);
+    opacity: 0;
+  }
+
+  .left-side {
+    background: #0c2842;
+    transition: width 0.5s ease; /* 平滑过渡动画 */
+    width: 120px; /* 展开时宽度 */
+    position: relative; /* 用于按钮定位 */
+  }
+  .left-side.collapsed {
+    width: 40px; /* 折叠时宽度 */
+  }
+
+  .addBtn {
+    height: 30px;
+    position: absolute;
+    background-size: 100% 100%;
+    background-position: center;
+    padding: 2px;
+    right: 10px;
+    top: 10px;
+    left: 10px;
+    align-items: center;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+  .btn-text-bg {
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    background-size: 100% 100%;
+    right: 10px;
+    top: 9px;
+    left: 10px;
+    bottom: 10px;
+  }
+  .btn-text {
+    margin-left: 3px;
+    font-size: 12px;
+    color: #fff;
+    white-space: nowrap;
+    margin-left: 30px;
+    line-height: 26px;
+  }
+  .historyBtn {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background-size: 100% 100%;
+    background-position: center;
+    padding: 2px;
+    right: 10px;
+    top: 100px;
+  }
+  .historyBtn1 {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background-size: 100% 100%;
+    background-position: center;
+    left: 3px;
+    top: 80px;
+  }
+  .divider0 {
+    border-bottom: 1px solid #1074c1;
+    width: auto;
+    margin: 0 10px;
+    height: 13%;
+    display: block;
+    background: transparent;
+  }
+  .foldBtn {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    background-size: 100% 100%;
+    background-position: center;
+    padding: 2px;
+    right: 10px;
+    bottom: 10px;
+    cursor: pointer;
+  }
+
+  .right-side {
+    flex: 1; /* 占据剩余空间 */
+    background: #09172c;
+  }
+
+  .input-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end; /* 内容底部对齐 */
+    height: 100%;
+    padding: 20px; /* 统一内边距 */
+  }
+  .ask-message {
+    align-self: flex-end;
+    float: right;
+    max-width: 70%;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+    color: #fff;
+    background: #0c2842;
+    align-self: flex-end; /* 右侧对齐‌:ml-citation{ref="2" data="citationList"} */
+  }
+  .answer {
+    display: flex;
+    flex-direction: row;
+  }
+  .answerIcon {
+    margin-top: 10px;
+    width: 35px;
+    height: 35px;
+    background-image: url('/@/assets/images/vent/home/answerIcon.svg');
+    background-size: 100% 100%;
+  }
+  .answer-message {
+    float: left;
+    max-width: 80%;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+    color: #fff;
+    background: #0c2842;
+  }
+
+  /** 系统返回信息**/
+  .system-message {
+    display: flex;
+    flex-direction: row;
+    align-self: flex-start;
+    max-width: 90%;
+    padding: 12px;
+    display: flex;
+  }
+  .answerIcon {
+    margin-top: 10px;
+    width: 35px;
+    height: 35px;
+    background-image: url('/@/assets/images/vent/home/answerIcon.svg');
+    background-size: 100% 100%;
+  }
+  .answer-message {
+    float: left;
+    max-width: 80%;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+    color: #fff;
+    background: #0c2842;
+  }
+  .dialog-area {
+    flex: 1; /* 占据剩余空间 */
+    gap: 50px; /* 消息块间隔统一控制 */
+    overflow-y: auto; /* 垂直滚动条 */
+    margin-bottom: 10px;
+  }
+  .loading-wrapper,
+  .content-wrapper {
+    min-height: 40px; /* 避免高度塌陷 */
+  }
+  .message-item.user {
+    margin-bottom: 30px;
+  }
+  .input-area {
+    background-color: #043256 !important;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  textarea {
+    background-color: #043256 !important;
+    width: 100%;
+    height: 40px;
+    border: none;
+    resize: none;
+    outline: none;
+    overflow: hidden;
+    padding: 10px; /* 统一内边距 */
+    color: #fff;
+  }
+
+  .action-bar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .upload-btn {
+    display: flex;
+    cursor: pointer;
+    padding: 6px 12px;
+  }
+
+  .divider {
+    color: #ccc;
+    font-weight: 300;
+    margin: 0 10px;
+  }
+
+  .send-file {
+    width: 20px;
+    height: 20px;
+    background-image: url('/@/assets/images/vent/home/sendFile.svg');
+    background-size: 100% 100%;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .send-img {
+    width: 20px;
+    height: 20px;
+    background-image: url('/@/assets/images/vent/home/sendImg.svg');
+    background-size: 100% 100%;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .send-btn {
+    width: 20px;
+    height: 20px;
+    margin-left: auto;
+    margin-right: 10px;
+    background-color: #1074c1;
+    background-image: url('/@/assets/images/vent/home/send.svg');
+    background-position: center;
+    background-size: 100% 100%;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+</style>

src/views/vent/home/configurable/configurable.data.bd.ts

@@ -1068,6 +1068,7 @@ export const testConfigBDFire: Config[] = [
         items: [
           {
             name: 'table',
+            // name: 'ai_chat',
             basis: '100%',
           },
         ],
@@ -1102,7 +1103,11 @@ export const testConfigBDFire: Config[] = [
       ],
       list: [],
       complex_list: [],
-      preset: [],
+      preset: [
+        // {
+        //   readFrom: '',
+        // }
+      ],
     },
     showStyle: {
       size: 'width:440px;height:260px;',

src/views/vent/monitorManager/alarmMonitor/common/warnGradeEchart.vue

@@ -7,7 +7,7 @@
 <script lang="ts" setup>
   import { defineProps, ref, nextTick, reactive, watch } from 'vue';
   import * as echarts from 'echarts';
-  import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
+  // import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
 
   let props = defineProps({
     echartData: {