feat: 新功能ai接口对接看板

src/hooks/useChartDataFetch.hook.ts

@@ -73,8 +73,9 @@ export const useChartDataFetch = (
         clearInterval(fetchInterval)
 
         const fetchFn = async () => {
-         
+          console.log('看板编辑')
           const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
+         
           if (res) {
             try {
               const filter = targetComponent.filter

src/utils/request.js

@@ -14,7 +14,7 @@ axios.defaults.headers['Content-Type'] = 'multipart/form-data'
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: '/ai',
+  baseURL: 'http://baijiahu.mynatapp.cc',
   // 超时（60秒）
   timeout: 60000 
 })

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/handlerFormat.js

@@ -0,0 +1,23 @@
+export const lineAndBar = `
+const obj = {
+    dimensions: ['product', 'data1'],
+    source:[]
+  }
+
+  if(res.type === 'bar' || res.type === 'line'){
+        res.data.forEach((item,index) => {
+            obj.source.push({
+                product: res.xData[index] ,
+                data1: item,
+            })
+        });
+  }else if(res.type === 'pie'){
+    res.data.forEach((item)=>{
+        obj.source.push({
+            product:item.name,
+            data1:item.value,
+        })
+    })
+  }
+
+return obj `

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -1,39 +1,52 @@
 <template>
-  <div class="go-chart-configurations-data-ajax">
-   
-
-    <setting-item-box :alone="true">
-      <template #name>
-        测试
-        <n-tooltip trigger="hover">
-          <template #trigger>
-            <n-icon size="21" :depth="3">
-              <help-outline-icon></help-outline-icon>
-            </n-icon>
-          </template>
-          默认赋值给 dataset 字段
-        </n-tooltip>
+  <div class="go-chart-configurations-data-ajax chat-container">
+    <!-- <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show> -->
+    <div class="chat-list" ref="scrollContainer">
+      <div
+        v-for="(item, index) in messageList.value"
+        :key="index"
+        :class="['chat-item', item.from == 'user' ? 'user-message' : 'ai-message']"
+      >
+        <!-- 头像 -->
+        <img :src="userIcon" class="user-icon" alt="" />
+        <!-- 内容 -->
+        <div class="message-content">
+          <div class="message-time">{{ item.time }}</div>
+          <div class="message-text">
+            <!-- 纯文本 -->
+            <div class="text-ros" v-if="!item.loading">
+              <span v-show="item.type == 'text'">{{ item.text }}</span>
+            </div>
+            <!-- 思考 -->
+            <div class="ai-loading" v-else><span>思考中</span> <n-spin size="small" content-class="spin-class" /></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <n-input
+      class="chat-input"
+      round
+      v-model:value="keyWord"
+      type="textarea"
+      placeholder="请输入需要统计的数据"
+      :autosize="{ minRows: 5 }"
+    >
+      <template #suffix>
+        <div class="chat-suffix">
+          <span></span>
+          <n-button :loading="loading" size="small" :class="['chat-send']" :bordered="false" @click="sendHandle">
+          </n-button>
+        </div>
       </template>
-
-      <n-button type="primary" ghost @click="sendHandle">
-        <template #icon>
-          <n-icon>
-            <flash-icon />
-          </n-icon>
-        </template>
-        发送请求
-      </n-button>
-    </setting-item-box>
-
-    <!-- 骨架图 -->
-    <go-skeleton :load="loading" :repeat="3"></go-skeleton>
-
-
+    </n-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed, onBeforeUnmount, watchEffect, toRaw } from 'vue'
+import userIcon from '@/assets/images/ai/user-icon.png'
+import { lineAndBar } from '../ChartDataAjax/handlerFormat.js'
+import { ref, toRefs, computed, onBeforeUnmount, nextTick, watch, toRaw, reactive, onMounted } from 'vue'
 import { icon } from '@/plugins'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
@@ -56,7 +69,7 @@ import { newFunctionHandle } from '@/utils'
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
-
+import moment from 'moment'
 const {
   requestOriginUrl,
   requestInterval: GlobalRequestInterval,
@@ -71,21 +84,21 @@ const showMatching = ref(false)
 
 let firstFocus = 0
 let lastFilter: any = undefined
+let keyWord = ref('')
+let lastIndex = ref(0)
+//聊天记录list
+let messageList: any = reactive([])
 
-// 请求配置 model
-const requestModelHandle = () => {
-  requestShow.value = true
-}
-
+const scrollContainer = ref<HTMLElement | null>(null)
 // 发送请求
 const sendHandle = async () => {
-
   if (!targetData.value?.request) return
+  loading.value = true
   targetData.value.request = {
     requestDataType: RequestDataTypeEnum.AJAX,
     requestHttpType: RequestHttpEnum.POST,
-    requestUrl: '/project/zf',
-    requestInterval: 120,
+    requestUrl: 'http://baijiahu.mynatapp.cc',
+    requestInterval: 300, //十分钟600
     requestIntervalUnit: RequestHttpIntervalEnum.SECOND,
     requestContentType: RequestContentTypeEnum.DEFAULT,
     requestParamsBodyType: RequestBodyEnum.FORM_DATA,
@@ -95,7 +108,7 @@ const sendHandle = async () => {
     requestParams: {
       Body: {
         'form-data': {
-          prompt: '统计点检的状态分布情况，用饼图展示'
+          prompt: keyWord.value
         },
         'x-www-form-urlencoded': {},
         json: '',
@@ -105,42 +118,64 @@ const sendHandle = async () => {
       Params: {}
     }
   }
+  //存储用户回答
+  messageList.value.push({
+    from: 'user',
+    text: keyWord.value,
+    type: 'text',
+    time: moment().format('YYYY/MM/DD HH:mm:ss'),
+    loading: true
+  })
+  lastIndex.value = messageList.value.length - 1
+
   try {
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
     loading.value = false
-    console.log(res,'ssssdddddddff')
+    messageList.value[lastIndex.value].loading = false
+    keyWord.value = ''
     if (res) {
-      const { data } = res
-      if (!data && !targetData.value.filter) {
-        window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
-        showMatching.value = true
-        return
-      }
-      targetData.value.option.dataset = newFunctionHandle(data, res, targetData.value.filter)
-      showMatching.value = true
+      targetData.value.lastMessagesItem = messageList.value[lastIndex.value] //保存最后一次问答
+      targetData.value.filter = lineAndBar
+      targetData.value.option.dataset = newFunctionHandle(res.data, res, targetData.value.filter)
       return
     }
     window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
-    console.error(error);
     loading.value = false
+    console.error(error)
     window['$message'].warning('数据异常，请检查参数！')
   }
 }
 
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
-
-watchEffect(() => {
-  const filter = targetData.value?.filter
-  if (lastFilter !== filter && firstFocus) {
-    lastFilter = filter
-    sendHandle()
+//监听图表选中变化
+watch(
+  () => targetData.value.id,
+  newData => {
+    if (targetData.value.lastMessagesItem) {
+      messageList.value = [targetData.value.lastMessagesItem]
+    } else {
+      messageList.value = []
+    }
+  },
+  {
+    immediate: true
   }
-  firstFocus++
-})
+)
+
+
+
+// 聊天室滚动条
+watch(
+  messageList.value,
+  () => {
+    nextTick(() => {
+      if (scrollContainer.value) {
+        scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
+      }
+    })
+  },
+  { deep: true }
+)
 
 onBeforeUnmount(() => {
   lastFilter = null
@@ -148,34 +183,20 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-@include go('chart-configurations-data-ajax') {
-  .n-card-shallow {
-    &.n-card {
-      @extend .go-background-filter;
-      @include deep() {
-        .n-card__content {
-          padding: 10px;
-        }
-      }
-    }
-    .edit-text {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      width: 325px;
-      height: 270px;
-      cursor: pointer;
-      opacity: 0;
-      transition: all 0.3s;
-      @extend .go-background-filter;
-      backdrop-filter: blur(2px) !important;
-    }
-    &:hover {
-      border-color: v-bind('themeColor');
-      .edit-text {
-        opacity: 1;
-      }
-    }
+.go-chart-configurations-data-ajax {
+  height: 87vh;
+}
+.chat-container {
+  & > div {
+    width: 100%;
+  }
+  .user-icon {
+    height: 35px;
+    width: 35px;
   }
 }
+/* 设置滚动条整体样式 */
+::-webkit-scrollbar {
+  width: 0px;
+}
 </style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue

@@ -181,6 +181,7 @@ const saveFilter = () => {
     window['$message'].error('过滤函数错误，无法进行保存')
     return
   }
+  // console.log(filter.value,'dddd')
   targetData.value.filter = filter.value
   closeFilter()
 }