whh 8 ヶ月 前
コミット
7fbdcef696

BIN
src/assets/images/home/menu_3_hover-.png


BIN
src/assets/images/home/menu_3_hover.png


BIN
src/assets/images/home/menu_3_hover1.png


+ 7 - 0
src/assets/styles/common.scss

@@ -8,6 +8,13 @@
   font-style: normal;
 }
 
+@font-face {
+  font-display: swap;
+  font-family: 'D-DIN-PRO';
+  src: url('@/assets/font/D-DIN-PRO.woff2') format('ttf');
+  font-weight: normal;
+  font-style: normal;
+}
 // chat 布局相关
 .chat-ask_icon,
 .chat-answer_icon {

+ 8 - 5
src/assets/styles/github-markdown-light.scss

@@ -198,13 +198,15 @@
 }
 
 .markdown-body table {
+  width: 100%;
+  table-layout: auto; /* 固定表格布局,便于均分列宽 */
   border-spacing: 0;
   border-collapse: collapse;
-  display: block;
-  width: max-content;
-  padding-bottom: 5px;
-  // max-width: 100%;
-  overflow: auto;
+  // display: table;
+  // width: max-content;
+  // padding-bottom: 5px;
+  // width: 100%;
+  // overflow: auto;
 }
 
 .markdown-body td,
@@ -572,6 +574,7 @@
 
 .markdown-body table th,
 .markdown-body table td {
+  white-space: nowrap;
   padding: 6px 13px;
   border: 1px solid #d0d7de;
 }

+ 4 - 4
src/components/Chat/ChatText.vue

@@ -73,21 +73,21 @@ const text = computed(() => {
 .markdown-body {
   .custom-table-wrapper {
     width: 710px;
-    padding: 10px;
+    padding: 10px 10px 4px 10px;
     background: #eff8fc;
     margin-bottom: 16px;
     overflow-x: scroll;
 
     &::-webkit-scrollbar {
-      height: 4px;
+      height: 6px;
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #ebf0f9;
+      background: #bfbfbf;
     }
 
     &::-webkit-scrollbar-track {
-      background: #f7f8fc;
+      background: #eff8fc;
     }
   }
 

+ 0 - 2
src/components/Layout/TheChatView.vue

@@ -17,8 +17,6 @@ const targetScrollDom = ref(null);
 const selectValue = ref('water');
 const voiceSwitchStatus = ref(false);
 
-
-
 const userMenuOptions = [
   {
     label: '个人中心',

+ 1 - 1
src/composables/useScroll.js

@@ -15,7 +15,7 @@ export const useScroll = () => {
   };
 
   const scrollToBottom = async () => {
-    await nextTick();
+    await nextTick(); 
     if (scrollRef.value) {
       targeScrolltDom.value.scrollTo({
         top: targeScrolltDom.value.scrollHeight,

+ 153 - 0
src/utils/autofit.js

@@ -0,0 +1,153 @@
+let currRenderDom = null;
+let currelRectification = ''
+let currelRectificationLevel = ''
+let resizeListener = null;
+let timer = null
+let currScale = 1
+let isAutofitRunnig = false
+let isElRectification = false
+const autofit = {
+  init(options = {}, isShowInitTip = true) {
+    if (isShowInitTip) {
+      console.log(`%c` + `autofit.js` + ` is running`, `font-weight: bold; color: #ffb712; background:linear-gradient(-45deg, #bd34fe 50%, #47caff 50% );background: -webkit-linear-gradient( 120deg, #bd34fe 30%, #41d1ff );background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color:linear-gradient( -45deg, #bd34fe 50%, #47caff 50% ); padding: 8px 12px; border-radius: 4px;`);
+    }
+    const {
+      dw = 1920,
+      dh = 929,
+      el = typeof options === 'string' ? options : "#app",
+      resize = true,
+      ignore = [],
+      transition = 'none',
+      delay = 0
+    } = options;
+    currRenderDom = el;
+    let dom = document.querySelector(el)
+    if (!dom) {
+      console.error(`autofit: '${el}' is not exist`);
+      return
+    }
+    const style = document.createElement('style');
+    const ignoreStyle = document.createElement('style');
+    style.lang = 'text/css';
+    ignoreStyle.lang = 'text/css';
+    style.id = 'autofit-style';
+    ignoreStyle.id = 'ignoreStyle';
+    style.innerHTML = `body {overflow: hidden;}`;
+    const bodyEl = document.querySelector('body')
+    bodyEl.appendChild(style);
+    bodyEl.appendChild(ignoreStyle);
+    dom.style.height = `${dh}px`;
+    dom.style.width = `${dw}px`;
+    dom.style.transformOrigin = `0 0`;
+    dom.style.overflow = "hidden";
+    keepFit(dw, dh, dom, ignore);
+    resizeListener = () => {
+      clearTimeout(timer)
+      if (delay != 0)
+        timer = setTimeout(() => {
+          keepFit(dw, dh, dom, ignore);
+          isElRectification && elRectification(currelRectification, currelRectificationLevel)
+        }, delay)
+      else {
+        keepFit(dw, dh, dom, ignore);
+        isElRectification && elRectification(currelRectification, currelRectificationLevel)
+      }
+    }
+    resize && window.addEventListener('resize', resizeListener)
+    isAutofitRunnig = true
+    setTimeout(() => {
+      dom.style.transition = `${transition}s`
+    });
+  },
+  off(el = "#app") {
+    try {
+      isElRectification = false
+      window.removeEventListener("resize", resizeListener);
+      document.querySelector('#autofit-style').remove();
+      const ignoreStyleDOM = document.querySelector('#ignoreStyle');
+      ignoreStyleDOM && ignoreStyleDOM.remove()
+      document.querySelector(currRenderDom ? currRenderDom : el).style = '';
+      isElRectification && offelRectification()
+    } catch (error) {
+      console.error(`autofit: Failed to remove normally`, error);
+      isAutofitRunnig = false
+    }
+    isAutofitRunnig && console.log(`%c` + `autofit.js` + ` is off`, `font-weight: bold;color: #707070; background: #c9c9c9; padding: 8px 12px; border-radius: 4px;`);
+  },
+
+}
+function elRectification(el, level = 1) {
+  if (!isAutofitRunnig) {
+    console.error("autofit.js:autofit has not been initialized yet")
+  }
+  !el && console.error(`autofit.js:bad selector: ${el}`)
+  currelRectification = el
+  currelRectificationLevel = level
+  const currEl = document.querySelectorAll(el)
+  if (currEl.length == 0) {
+    console.error("autofit.js:elRectification found no element")
+    return
+  }
+  for (let item of currEl) {
+    if (!isElRectification) {
+      item.originalWidth = item.clientWidth
+      item.originalHeight = item.clientHeight
+    }
+    let rectification = currScale == 1 ? 1 : currScale * level
+    item.style.width = `${item.originalWidth * rectification}px`
+    item.style.height = `${item.originalHeight * rectification}px`
+    item.style.transform = `scale(${1 / currScale})`
+    item.style.transformOrigin = `0 0`
+  }
+  isElRectification = true
+}
+function offelRectification() {
+  if (!currelRectification) return
+  for (let item of document.querySelectorAll(currelRectification)) {
+    item.style.width = ``
+    item.style.height = ``
+    item.style.transform = ``
+  }
+}
+function keepFit(dw, dh, dom, ignore) {
+  let clientHeight = document.documentElement.clientHeight;
+  let clientWidth = document.documentElement.clientWidth;
+  currScale = (clientWidth / clientHeight < dw / dh) ? (clientWidth / dw) : (clientHeight / dh)
+  dom.style.height = `${clientHeight / currScale}px`;
+  dom.style.width = `${clientWidth / currScale}px`;
+  dom.style.transform = `scale(${currScale})`;
+  const ignoreStyleDOM = document.querySelector('#ignoreStyle');
+  ignoreStyleDOM.innerHTML = ''
+  for (let item of ignore) {
+    let itemEl = item.el || item.dom
+    typeof item == 'string' && (itemEl = item)
+    if (!itemEl) {
+      console.error(`autofit: bad selector: ${itemEl}`)
+      continue
+    }
+    let realScale = (item.scale ? item.scale : 1 / currScale)
+    let realFontSize = realScale != currScale ? item.fontSize : 'autofit'
+    let realWidth = realScale != currScale ? item.width : 'autofit'
+    let realHeight = realScale != currScale ? item.height : 'autofit'
+    let regex = new RegExp(`${itemEl}(\x20|{)`, 'gm')
+    let isIgnored = regex.test(ignoreStyleDOM.innerHTML);
+    if (isIgnored) {
+      continue
+    }
+    ignoreStyleDOM.innerHTML += `\n${itemEl} { 
+      transform: scale(${realScale})!important;
+      transform-origin: 0 0;
+      width: ${realWidth}!important;
+      height: ${realHeight}!important;
+    }`;
+    if (realFontSize) {
+      ignoreStyleDOM.innerHTML += `\n${itemEl} div ,${itemEl} span,${itemEl} a,${itemEl} * {
+        font-size: ${realFontSize}px;
+      }`;
+    }
+  }
+}
+export {
+  elRectification
+}
+export default autofit;

+ 0 - 0
src/views/analyse/config/enum.js → src/utils/enum.js


+ 2 - 13
src/utils/format.js

@@ -1,6 +1,5 @@
-const formatTextData = (dataSource, whileList) => {
+import { ORDER_OPTION_ENUM } from "./enum";
 
-}
 
 export const formatToData = (dataSource, warnKey) => {
   const reuslt = {
@@ -47,21 +46,11 @@ export const replaceArray = (array, startIndex, length, replacementValue) => {
 }
 
 export const formatEchart = (data) => {
-
-  const customEnum = {
-    no3Hlj1Jqr: '1#好氧池硝酸盐',
-    no3Hlj2Jqr: '2#好氧池硝酸盐',
-    nh31Jqr:'1#缺氧氨氮',
-    nh32Jqr:'2#缺氧氨氮',
-    no3Qyc1Jqr:'1#缺氧池硝酸盐',
-    no3Qyc2Jqr:'2#缺氧池硝酸盐',
-    tpRccJqr:'二沉池正磷酸盐',
-  }
   const keys = Array.from(new Set(data.flatMap(item => Object.keys(item).filter(key => key !== 'time'))));
 
   const xAxisData = data.map(item => item.time);
   const yAxisData = keys.map(key => ({
-    title: customEnum[key],
+    title: ORDER_OPTION_ENUM[key],
     list: data.map(item => !item[key] ? 0 : Number(item[key].toFixed(2)))
   }))
 

+ 14 - 13
src/views/analyse/WaterView.vue

@@ -324,7 +324,6 @@ const handleWelcomeRecommend = question => {
         @on-click="handleWelcomeRecommend"
         v-if="!textDataSources"
       />
-
       <ChatBaseCard v-if="textDataSources">
         <div class="waring-answer-wrapper">
           <dl class="message-inner warning-info_medium ">
@@ -405,18 +404,20 @@ const handleWelcomeRecommend = question => {
           >
             <div class="markdown-body text-[15px] break-all">
               <strong class="block mb-[16px]">推荐指标调整:</strong>
-              <table>
-                <thead>
-                  <tr>
-                    <th v-for="text in item.table.header" :key="text">{{ text }}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td v-for="text in item.table.body" :key="text">{{ text }}</td>
-                  </tr>
-                </tbody>
-              </table>
+              <div class="custom-table-wrapper">
+                <table>
+                  <thead>
+                    <tr>
+                      <th v-for="text in item.table.header" :key="text">{{ text }}</th>
+                    </tr>
+                  </thead>
+                  <tbody class="text-center">
+                    <tr>
+                      <td v-for="text in item.table.body" :key="text">{{ text }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
               <strong class="block mb-[16px]">预测推演结果:</strong>
               <span>以上指标达成后,预计三小时内总氮可以达到:{{ item.content }}</span>
             </div>

+ 141 - 121
src/views/analyse/WorkOrder.vue

@@ -6,7 +6,7 @@ import { ChatAsk, ChatAnswer } from '@/components/Chat';
 import { orderApi } from "@/api/order";
 import { chatApi } from '@/api/chat';
 import { formatEchart, isNumberComprehensive } from '@/utils/format';
-import { ORDER_OPTION_ENUM } from './config/enum';
+import { ORDER_OPTION_ENUM } from '@/utils/enum';
 import { getAreaOptions, getOrderAreaOptions } from './config/echartOptions'
 import * as echarts from 'echarts';
 import dayjs from 'dayjs';
@@ -17,30 +17,19 @@ const { recordList, isFetching, onScrolltolower, onReset, addHistoryRecord } = u
 const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll();
 const { chatDataSource, addChat, updateChat, clearChat, updateById } = useChat();
 
-const ANSWER_ID_KEY = '@@id@@';
-
-const arr = []
-for (let i = 0; i < 2; i++) {
-  arr.push({
-    title: '2024-06-' + (i + 1),
-    key: 'no' + i,
-    width: '150px',
-    align: 'center'
-  })
-}
-
+let controller = new AbortController();
 
-const columns = ref(arr)
+const ANSWER_ID_KEY = '@@id@@';
 
-const tableData = ref([{ no0: 1, no1: 2 }]);
 const pageDataSource = ref({});
+const chartRefDom = ref(null);
 
-let chart = null;
-let controller = new AbortController();
+const chartInstance = {};
 
 const echartRef = ref([]);
 const message = useMessage();
 const reportDate = ref();
+
 const workOrderParams = ref({
   timeBegin: null,
   timeEnd: null,
@@ -48,22 +37,6 @@ const workOrderParams = ref({
   checkGroup: [],
 })
 
-/**
- * 将他们分组,
- *  1、进水指标:jsGroup  出水指标:csGroup  化验指标:hyGroup
- *  2、组内的数据项和之前一样的,但是只返回勾选的子项
- *  3、勾选的项如果没值,字段一定也要返回,可以是null or 0
- * */
-
-// const mockData = {
-
-//   jsGroup: [{ jsCod: 1, jsNh3: null, time: '2024/06/05', .... }, {}],
-//   csGroup: [],
-//   hyGroup: []
-
-// }
-
-
 const switchActive = ref(false);
 const tabActive = ref("daily");
 const model = ref({})
@@ -75,6 +48,8 @@ const recordActive = ref(null);
 const currenSessionId = ref(null);
 
 const isExistInHistory = computed(() => (recordList.value.findIndex(({ sessionId: sId }) => sId === unref(currenSessionId)) === -1));
+const isChart = computed(() => tabActive.value == 'customDaily');
+const chatDataSourceItem = computed(() => unref(chatDataSource)[chatDataSource.value.length - 1]);
 
 // 新建对话
 const handleCreateDialog = async () => {
@@ -87,6 +62,8 @@ const handleCreateDialog = async () => {
   if (!unref(chatDataSource).length) {
     return message.info('已切换最新会话');
   }
+  
+  tabActive.value = 'daily';
 
   currenSessionId.value = null;
 
@@ -101,17 +78,37 @@ const handleChatDetail = async ({ sessionId }) => {
 
   controller.abort();
 
+  if(currenSessionId.value === sessionId) return;
+
   recordActive.value = sessionId;
 
   const { data } = await chatApi.getAnswerHistoryDetail({ sessionId });
 
-  chatDataSource.value = data.map(item => ({ ...item, loading: false, }));
+  let echartData = [];
+
+  chatDataSource.value = data.map(item => {
+    if ( item.remark ) {
+      echartData = item.echartWithTableData = formatData(JSON.parse(item.remark));
+    }
+
+    return { ...item, loading: false };
+  })
+ 
+  echartData.length && createEchart(echartData);
+
   currenSessionId.value = sessionId;
 
+  workOrderParams.value = {
+    timeBegin: null,
+    timeEnd: null,
+    whichWay: 1,
+    checkGroup: [],
+  }
+
   scrollToBottom();
 }
 
-const onRegenerate = async ({ question, params1 }) => {
+const onRegenerate = async (question, options) => {
   controller = new AbortController();
 
   const sessionId = unref(currenSessionId);
@@ -122,7 +119,8 @@ const onRegenerate = async ({ question, params1 }) => {
       question,
       module: 1,
       isStrong: Number(unref(switchActive)),
-      reportDate: reportDate.value
+      reportDate: reportDate.value,
+      ...options,
     },
     signal: controller.signal,
     onDownloadProgress: ({ event }) => {
@@ -131,6 +129,7 @@ const onRegenerate = async ({ question, params1 }) => {
       const [answer] = responseText.split(ANSWER_ID_KEY);
 
       updateChat({
+        ...chatDataSourceItem.value,
         sessionId,
         showVal: question,
         answer,
@@ -148,6 +147,7 @@ const onRegenerate = async ({ question, params1 }) => {
     const [answer, id] = data.split(ANSWER_ID_KEY);
 
     updateChat({
+      ...chatDataSourceItem.value,
       id,
       sessionId,
       showVal: question,
@@ -166,6 +166,7 @@ const onRegenerate = async ({ question, params1 }) => {
     onReset();
   }
 }
+
 // 提交问题
 const handleSubmit = async (question, params) => {
 
@@ -185,69 +186,28 @@ const handleSubmit = async (question, params) => {
     echartWithTableData: []
   }
 
-  const isChart = tabActive.value == 'customDaily';
-
-  if (isChart) {
+  if (isChart.value) {
     const { data } = await orderApi.postOrderChart(params);
-    const titleEnum = {
-      jsGroup: '进水指标',
-      csGroup: '出水指标',
-      hyGroup: '化验指标'
-    }
-    const reuslt = Object.entries(data).map(([key, value]) => {
-      if ( value.length ) {
-        const [ xAxisData, yAxisData ] = formatEchart(value);
-        const [ item ] = value; 
-        const columns = Object.keys(item).map(k => ({
-          title: ORDER_OPTION_ENUM[k],
-          key: k,
-          width: '150px',
-          align: 'center',
-        }))
-        const data = value.map(item => {
-          Object.entries(item).forEach(([k, v]) => {  
-            console.log(k, isNumberComprehensive(v));
-            if (isNumberComprehensive(v)) {
-              item[k] = v ? Number(v.toFixed(2)) : 0
-            }
-          })
-          return item;
-        })
-        return {
-          id: key,
-          title: titleEnum[key],
-          xAxisData,
-          yAxisData,
-          columns,
-          data
-        }
-      }
-    }).filter(Boolean);
+    const reuslt = formatData(data);
 
     option.echartWithTableData = reuslt;
-
-    console.log( option );
   }
 
   addChat(option);
 
-  scrollToBottom();
-
   setTimeout(() => {
 
-    option.echartWithTableData.forEach(({ id, xAxisData, yAxisData }) => {
-      const dom = document.getElementById(id);
-      const chart = echarts.init(dom, null, { width: 680, height: 300 });
-      const option = getOrderAreaOptions({ xAxisData, yAxisData });
-      chart.setOption(option);
+    updateChat({
+      ...chatDataSourceItem.value,
+      delayLoading: false
     })
 
-    // if(!chart) {
-    //   const dom = document.getElementById('chartContainer')
-    //   chart = echarts.init(dom, null, { width: 680, height: 300 });
-    // }
+    createEchart(option.echartWithTableData);
+      
+    scrollToBottom();
+
+    // onRegenerate(question, params)
     
-    // onRegenerate({ question }), 2 * 1000
   }, 2 * 1000);
 }
 
@@ -256,11 +216,7 @@ const handleCreateOrder = async () => {
   const { timeBegin, timeEnd, whichWay, checkGroup } = unref(workOrderParams);
   const startDateTime = dayjs(timeBegin);
   const endDateTime = dayjs(timeEnd);
-  const params = {
-    timeBegin,
-    timeEnd,
-    whichWay
-  };
+  let params = {};
 
   let question = `请生成${reportDate.value}智慧工单分析报告`;
 
@@ -272,7 +228,12 @@ const handleCreateOrder = async () => {
     if (!timeEnd) return message.warning('请选择结束日期');
     if (!isStartAfterThirtyDaysBeforeEnd) return message.warning('只可生成一个月区间的工单报告');
     if (!checkGroup.length) return message.warning('请至少选择一项指标项');
-
+    
+    params = {
+      timeBegin,
+      timeEnd,
+      whichWay
+    }
     checkGroup.forEach(key => params[key] = true);
 
     question = `请成生${startDateTime.format("MM月DD日")}-${endDateTime.format("MM月DD日")}的在线仪表的日报工单`
@@ -286,9 +247,63 @@ const handleCreateOrder = async () => {
   handleSubmit(question, params)
 }
 
-// 创建echart
-const createLineEchart = async (params) => {
-  await orderApi.postOrderChart(params);
+// 创建echart图形
+const createEchart = (echartData) => {
+
+  setTimeout(() => {
+   
+    echartData.forEach(({ key, xAxisData, yAxisData }) => {
+      
+      // if ( !chartInstance[key] ) {
+        const dom = document.getElementById(key);
+        chartInstance[key] = echarts.init(dom, null, { width: 680, height: 300 });
+      // }
+    
+      const option = getOrderAreaOptions({ xAxisData, yAxisData });
+    
+      // chartInstance[key].clear();
+      chartInstance[key].setOption(option);
+    })
+  })
+}
+
+// 格式化 echart 和 table 数据
+const formatData = (data) => {
+  const titleEnum = {
+    jsGroup: '进水指标',
+    csGroup: '出水指标',
+    hyGroup: '化验指标'
+  }
+  return Object.entries(data).map(([key, value]) => {
+    if ( value.length ) {
+      const [ xAxisData, yAxisData ] = formatEchart(value);
+      const [ item ] = value; 
+      const columns = Object.keys(item).map(k => ({
+        title: ORDER_OPTION_ENUM[k],
+        key: k,
+        width: '150px',
+        align: 'center',
+      }))
+      const data = value.map(item => {
+        Object.entries(item).forEach(([k, v]) => {
+          !v && v!=0 && (item[k] = '-');
+          if (isNumberComprehensive(v)) {
+            item[k] = v ? Number(v.toFixed(2)) : 0
+          }
+        })
+        return item;
+      })
+
+      return {
+        key: key,
+        title: titleEnum[key],
+        xAxisData,
+        yAxisData,
+        columns,
+        data
+      }
+    }
+  }).filter(Boolean);
 }
 
 // 删除历史对话
@@ -322,13 +337,11 @@ const dateEndDisabled = (timestamp) => {
 }
 
 onMounted(() => {
-  // const dom = document.getElementById('chartContainer')
-  //   console.log( echartRef.value );
-  //   chart = echarts.init(dom);
 })
 
 onUnmounted(() => {
   controller.abort();
+  // Object.keys(chartInstance).forEach(key => chartInstance[key].clear());
 })
 </script>
 
@@ -353,15 +366,9 @@ onUnmounted(() => {
 
     <TheChatView ref="scrollRef" :is-footer="false">
       <ChatWelcome title="您好,我是LibraAI智慧工单助手" :sub-title="[
-      '基于大语言模型的智能工单分析助手,可以为您实现数据分析及数据解读',
-      '选择日期并为您生成日报分析'
-    ]" v-if="!chatDataSource.length" />
-    <!-- :loading="item.loading" :delay-loading="item.delayLoading" -->
-        <!-- <ChatAnswer content="11111111111"> -->
-      <!-- v-show="item.isChart && !item.delayLoading" -->
-          
-        <!-- </ChatAnswer> -->
-
+        '基于大语言模型的智能工单分析助手,可以为您实现数据分析及数据解读',
+        '选择日期并为您生成日报分析'
+      ]" v-if="!chatDataSource.length" />
 
       <div class="conversation-item" v-show="chatDataSource.length">
         <div v-for="item in chatDataSource" :key="item.sessionId">
@@ -372,37 +379,41 @@ onUnmounted(() => {
             :loading="item.loading"
             :delay-loading="item.delayLoading"
             :isSatisfied="item.isSatisfied"
+            :toggleVisibleIcons="false"
             @on-click-icon="params => updateById(params)"
           >
-            <div v-show="!item.delayLoading">
-              <div v-for="(item, index) in item.echartWithTableData" :key="index">
+            <main v-show="!item.delayLoading">
+              <div 
+                class="area_inner"
+                v-for="(item, index) in item.echartWithTableData"
+                :key="index + new Date().getTime()"
+              >
                 <div class="echart-warpper" >
                   <span class="mb-[10px] #1A2029 font-bold">{{ item.title }}</span>
-                  <div :id="item.id" class="w-[680px] h-[300px]" style="width: 680px; height: 300px;"></div>
+                  <div :id="item.key" class="w-[680px] h-[300px]"></div>
                 </div>
-                <div class="w-[700px]">
+                
+                <div class="w-[680px]" style="max-width: 680px; overflow-x: auto;">
                   <NDataTable
-                    :max-height="250"
                     bordered
+                    size="small"
+                    :scroll-x="item.columns.length > 5 ? 1200: 670"
+                    :max-height="250"
                     :single-line="false"
                     :columns="item.columns"
                     :data="item.data"
-                    scroll="{ x: true }"
-                    size="small"
                   >
-                  <template #empty>
+                    <template #empty>
                       <span class="leading-[32px]">暂无数据</span>
                     </template>
                   </NDataTable>
                 </div>
               </div>
-            </div>
+            </main>
           </ChatAnswer>
         </div>
       </div>
 
-
-
       <div class="order-container px-[60px] py-[30px] mt-[36px] rounded-[10px] bg-[#fff]" v-if="!chatDataSource.length">
         <div
           class="flex items-center justify-start space-x-[24px] pb-[20px] border-b-[1px] border-solid border-[#F1F1F1]">
@@ -517,7 +528,6 @@ onUnmounted(() => {
         </footer>
       </div>
 
-
     </TheChatView>
   </section>
 </template>
@@ -527,6 +537,16 @@ onUnmounted(() => {
   font-size: 12px !important;
 }
 
+.area_inner {
+  display: flex;
+  align-items: center;
+  flex-flow: column;
+  padding-bottom: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  background: #eff8fc;
+}
+
 .list-item {
   margin-bottom: 16px;
 
@@ -597,4 +617,4 @@ onUnmounted(() => {
     }
   }
 }
-</style>
+</style>../../utils/enum

+ 3 - 7
src/views/analyse/config/echartOptions.js

@@ -142,7 +142,6 @@ export const getAreaOptions = ({ xAxisData, seriesList }) => {
 }
 
 export const getOrderAreaOptions = ({ xAxisData, yAxisData }) => {
-  console.log("xAxisData", xAxisData);
 
   const color = [
     '#0FFEFF',
@@ -186,7 +185,6 @@ export const getOrderAreaOptions = ({ xAxisData, yAxisData }) => {
 
   return {
     series,
-
     tooltip: {
       trigger: 'axis',
     },
@@ -215,7 +213,7 @@ export const getOrderAreaOptions = ({ xAxisData, yAxisData }) => {
         },
       },
       right: '4',
-      top: '0',
+      top: '6',
     },
     xAxis: [{
       type: "category",
@@ -264,10 +262,8 @@ export const getOrderAreaOptions = ({ xAxisData, yAxisData }) => {
       },
       axisLabel: {
         show: true,
-        textStyle: {
-          color: '#666',
-          padding: 0
-        },
+        color: '#666',
+        padding: 0,
         formatter: function (value) {
           return value
         }