智能数据

src/components/DialogWrap.vue

@@ -28,10 +28,20 @@
           <div class="dialog-footer" v-if="item?.question">
             <p style="margin-top: 0">{{ item.question }}</p>
           </div>
-          <div class="dialog-header" v-if="item?.capacity">
+          <!-- 如果是代码则不显示头像 -->
+          <div class="dialog-header" v-if="item?.capacity && (!item.code || !item.sql)">
             <img alt="avatar" src="/src/assets/slider/logo.jpg" width="28" />
           </div>
-          <div class="dialog-footer" v-if="item.capacity"
+          <!-- 有代码则优先渲染代码，没有代码则渲染答案 -->
+          <div class="dialog-code-footer" v-if="item.code || item.sql">
+            <p class="dialog-code-footer-title" v-if="item.code">Python：</p>
+            <span v-html="getHTML(item.code)"></span>
+
+            <p class="dialog-code-footer-title" v-if="item.sql">SQL：</p>
+            <span v-html="getHTML(item.sql)"></span>
+          </div>
+
+          <div class="dialog-footer" v-else-if="item.capacity"
             :style="{ display: dialogConfig.type === 'paper' ? 'inline-block' : 'block' }">
             <div v-if="type === 'knowledge'" @click="openCapacity(key)"
               :class="[readonly || item.capacity.status === 'loading' ? 'disabled' : '']">
@@ -97,6 +107,7 @@
               <span v-else v-html="getHTML(item.answer)"></span>
             </p>
           </div>
+
           <div class="dialog-footer" v-else>
             <span v-html="getHTML(item.answer)"></span>
           </div>
@@ -138,9 +149,9 @@
               </div>
             </section>
           </div>
+          <!-- 如果有图片 -->
 
           <div v-if="item?.image_url">
-            <!-- 如果有图片 -->
             <a-image width="500" :src="item?.image_url" />
           </div>
 
@@ -341,6 +352,7 @@ export default defineComponent({
     const answerReference = ref([]);
     const imageUrl = ref(undefined);
     const answerFile = ref(undefined);
+    const answerCode = ref(undefined);
     const answerSql = ref({});
     const addQuestion = (question, file = null) => {
       let result = { question, capacity: null, answer: "", other: null, file: null, };
@@ -351,8 +363,8 @@ export default defineComponent({
       data.answer = answerData.value;
       data.reference = answerReference.value;
       data.image_url = imageUrl.value;
+      data.code = answerCode.value;
       data.file = answerFile.value;
-      // TODO渲染sql，修改渲染代码的样式
       data.sql = answerSql.value;
       addData(data);
     };
@@ -414,34 +426,7 @@ export default defineComponent({
             addAnswer(loadingData.value);
           }
         }
-
-        // 如果是智能数据
-        if (props.type == 'smartData') {
-
-          // 以下是智能数据对话的变量
-          const { image_url, excel_url, excel_name, code, sql } = JSON.parse(event.data);
-          answerData.value = getHTML(code);
-          // 如果有图片或excel，则更新图片或excel地址
-          if (image_url) {
-            imageUrl.value = `http://${window.location.hostname}${image_url}`
-          }
-          if (excel_url) {
-            const file = {
-              file_url: `http://${window.location.hostname}${excel_url}`,
-              file_name: excel_name || 'excel.xlsx',
-            }
-            console.log('file', file)
-            answerFile.value = file
-          }
-
-          if (sql) {
-            answerSql.value = sql;
-          }
-          if (answerData.value && !isLoaded.value) {
-            answerLoaded();
-          }
-          addAnswer(loadingData.value);
-        } else if (type === "message") {
+        if (type === "message") {
           message = replaceCode(message);
           answerData.value = getHTML(message);
           answerReference.value = [];
@@ -457,6 +442,32 @@ export default defineComponent({
               }
             });
           }
+
+          if (props.type == 'smartData') {
+            // 以下是智能数据对话的变量
+            const { image_url, excel_url, excel_name, code, sql } = JSON.parse(event.data);
+            answerCode.value = getHTML(code);
+            // 如果有图片或excel，则更新图片或excel地址
+            if (image_url) {
+              imageUrl.value = `http://${window.location.hostname}${image_url}`
+            }
+            if (excel_url) {
+              const file = {
+                file_url: `http://${window.location.hostname}${excel_url}`,
+                // file_name: `${excel_name}` || 'excel.xlsx',
+                // 没有名字，暂时显示点击下载xlsx
+                file_name: '点击下载',
+              }
+              console.log('file', file)
+              answerFile.value = file
+            }
+
+            if (sql) {
+              answerSql.value = sql;
+            }
+          }
+
+
           if (answerData.value && !isLoaded.value) {
             answerLoaded();
           }
@@ -567,7 +578,7 @@ export default defineComponent({
 
 .paper-wrap {
   display: flex;
-  max-width: 200px;
+  /* TODO 加后缀 */
   align-items: center;
   margin-left: 40px;
   margin-bottom: 10px;
@@ -919,6 +930,175 @@ export default defineComponent({
   }
 }
 
+.dialog-code-footer {
+  border-radius: 12px;
+  font-size: 14px;
+  background-color: #32333c;
+  color: #BCBDC3;
+  padding: 12px 16px;
+  margin: 16px 0;
+
+  .dialog-code-footer-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 16px 0;
+    width: 100%;
+    padding: 4px 8px;
+    background-color: #3D3F3F;
+    color: #BCBDC3;
+  }
+
+  &:nth-child(2) {
+    background-color: rgba(0, 0, 0, 0);
+    margin: 0;
+  }
+
+  >p {
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+  }
+
+  >div {
+    border: 1px solid rgba(64, 95, 234, 0.42);
+    background-color: rgba(255, 255, 255, 1);
+    color: rgba(16, 16, 16, 1);
+    font-size: 14px;
+    display: inline-flex;
+    padding: 4px 8px;
+    border-radius: 4px;
+    align-items: center;
+    cursor: pointer;
+    height: 30px;
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+
+    &:hover {
+      background: rgb(245, 247, 254, 0.4);
+    }
+
+    >span {
+      margin: 0 8px;
+    }
+
+    >b {
+      margin-right: 8px;
+    }
+  }
+
+  >section {
+    padding: 0 16px;
+    background-color: #ffffff;
+    border-radius: 12px;
+    margin-top: 16px;
+
+    >p {
+      display: inline-block;
+      color: rgba(16, 16, 16, 1);
+      font-size: 12px;
+      margin-top: 16px;
+      width: 100%;
+    }
+
+    >div {
+      margin-top: 4px;
+      overflow: hidden;
+      margin-bottom: 16px;
+      display: inline-block;
+      width: 100%;
+
+      >div {
+        margin-top: 8px;
+
+        >div {
+          &:nth-child(1) {
+            border-radius: 4px;
+            color: rgba(16, 16, 16, 1);
+            font-size: 12px;
+            height: 24px;
+            border: 1px solid rgba(229, 229, 229, 1);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-right: 8px;
+            cursor: pointer;
+
+            &.disabled {
+              cursor: not-allowed;
+            }
+
+            &:hover {
+              background: rgba(229, 229, 229, 0.2);
+            }
+
+            >span {
+              &:nth-child(1) {
+                background-color: rgba(0, 174, 163, 0.2);
+                color: #00aea3;
+                font-size: 12px;
+                border: 1px solid rgba(64, 95, 234, 0.13);
+                padding: 0 4px;
+                margin: 0 4px 0 0;
+              }
+
+              &:nth-child(3) {
+                color: #00aea3;
+                font-size: 12px;
+
+                em {
+                  padding: 0 4px;
+                  font-style: normal;
+                  border-left: 1px solid rgba(64, 95, 234, 1);
+                  font-weight: bold;
+
+                  &:nth-child(1) {
+                    border: none;
+                  }
+                }
+              }
+            }
+          }
+
+          &:nth-child(2) {
+            >p {
+              margin: 8px 0;
+              display: flex;
+
+              >span {
+                transform: translateY(2px);
+                color: #00aea3;
+                font-weight: bold;
+                font-size: 12px;
+                margin-right: 8px;
+              }
+            }
+          }
+        }
+      }
+
+      >p {
+        float: left;
+        width: 48%;
+        border-radius: 4px;
+        background-color: rgba(245, 247, 254, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 12px;
+        margin-top: 8px;
+        height: 36px;
+        line-height: 36px;
+        padding: 0 8px;
+        display: flex;
+        align-items: center;
+
+        &:nth-child(odd) {
+          margin-right: 4%;
+        }
+      }
+    }
+  }
+}
+
 .section-suggestions {
   margin: 12px 0 20px;
 

src/components/DocumentCards.vue

@@ -37,8 +37,23 @@
               </div>
             </header>
             <div>
+              <section v-if="agengtName == '智能数据'">
+                <a-upload draggable :multiple="!uploadFile" :limit="50" :show-file-list="false"
+                  @before-upload="onBeforeUpload" @exceed-limit="onExceedLimit" @before-remove="onBeforeRemove"
+                  :custom-request="customRequest" :show-upload-button="{ showOnExceedLimit: true }"
+                  accept=".xls,.xlsx,.csv,.db">
+                  <template #upload-button>
+                    <div class="upload-main">
+                      <p>拖拽文档到这里，或<span>点此上传</span></p>
+                      <span>
+                        支持上传 Excel (.xls, .xlsx)，CSV (.csv)，DB (.db)，大小不超过30M
+                      </span>
+                    </div>
+                  </template>
+                </a-upload>
+              </section>
 
-              <section>
+              <section v-else>
                 <a-upload draggable :multiple="!uploadFile" :limit="50" :show-file-list="false"
                   @before-upload="onBeforeUpload" @exceed-limit="onExceedLimit" @before-remove="onBeforeRemove"
                   :custom-request="customRequest" :show-upload-button="{ showOnExceedLimit: true }" accept="*">
@@ -106,10 +121,10 @@
           </div>
         </template>
       </a-popover>
-      <section v-if="hasSlider">
+      <!-- <section v-if="hasSlider">
         <p>出题随机性</p>
         <a-slider :default-value="50" :style="{ width: '100px' }" />
-      </section>
+      </section> -->
     </footer>
   </main>
 </template>
@@ -117,7 +132,7 @@
 import dayjs from "dayjs";
 import { defineComponent, ref, inject, reactive } from "vue";
 export default defineComponent({
-  props: ["data", "hasUpload", "hasSlider", "uploadFile", "isQuestion", "agentId"],
+  props: ["data", "hasUpload", "hasSlider", "uploadFile", "isQuestion", "agentId", "agengtName"],
   setup(props) {
     const showUpload = ref(false);
     const { helper, ajax } = inject("$global");
@@ -263,6 +278,7 @@ export default defineComponent({
       fileList.value = fileList.value.filter(item => item.uid !== deleteId.value);
     };
     return {
+      agengtName,
       buttonLoading,
       fileList,
       selectedKeys,

src/utils/config.js

@@ -66,5 +66,13 @@ export default {
             desc: "您可以上传文档，小数能针对单文档或多个文档内容自动出题，高效便捷的帮助你建立私人题库。",
             dialog: "您可以上传文档，小数能针对单文档或多个文档内容自动出题，高效便捷的帮助你建立私人题库。"
         },
+        {
+            id: 8,
+            title: "出题组卷",
+            icon: "6",
+            img: "/src/assets/index/6.png",
+            desc: "您可以上传文档，小数能针对单文档或多个文档内容自动出题，高效便捷的帮助你建立私人题库。",
+            dialog: "您可以上传文档，小数能针对单文档或多个文档内容自动出题，高效便捷的帮助你建立私人题库。"
+        },
     ]
 };

src/views/DocumentsmartData.vue

@@ -1,5 +1,6 @@
 <template>
-    <document-cards :hasUpload="true" :uploadFile="true" :data="data" :hasSlider="false" :agentId="agentId" />
+    <document-cards :hasUpload="true" :uploadFile="true" :data="data" :hasSlider="false" :agentId="agentId" :
+        agengtName="智能数据" />
 </template>
 <script>
 import DocumentCards from "@/components/DocumentCards.vue";