askbot-dragon 1.6.44-beta → 1.6.46-beta

package/src/components/intelligentSummary.vue

@@ -1,207 +1,210 @@
-<template>
-  <div class="intelligentSummary" id="intelligentSummary">
-    <div class="summaryHeader">
-      <div class="left">
-        <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
-        <span>智能摘要</span>
-      </div>
-      <div class="right">
-        <div class="regenerationBtn" @click="regeneration">
-          <template v-if="!isLoading">重新生成</template>
-          <template v-else>
-            <img
-                height="20px"
-                width="20px"
-                src="https://static.guoranbot.com/loading.gif"
-                alt
-                srcset
-                style="margin-right: 6px"
-            />
-            <span>生成中</span>
-          </template>
-        </div>
-        <i class="iconfont guoran-tongyichicun-shouqi" @click="closeSummary"></i>
-      </div>
-    </div>
-    <div class="summaryContent">
-      <span>{{ typedContent }}</span>
-    </div>
-    <div class="intelligentBottom" v-if="recommendQuestions.length > 0">
-      <div class="intelligentList">
-        <div class="intelligentQues"
-             v-for="(item,index) in recommendQuestions"
-             :key="index"
-             @click="recommendQues(item)"
-        >
-          {{ item }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "intelligentSummary",
-  data(){
-    return{
-      summary:"",
-      recommendQuestions:[],
-      isLoading:false,
-      typedContent:"",
-      typingSpeed:20
-    }
-  },
-  props:{
-    knowledgeId:{
-      type:String
-    }
-  },
-  methods:{
-    getKnowledgeSummary() {
-      let url = "/knowledge-api/knowledge/detail/" + this.knowledgeId;
-      this.typedContent = "";
-      this.summary = "";
-      this.$http.get(url).then(res => {
-        console.log('res',res)
-        if (res.data.data){
-          this.summary = res.data.data.summary;
-          this.recommendQuestions = res.data.data.recommendQuestions ? res.data.data.recommendQuestions : [];
-          if (!this.summary){
-            this.regeneration();
-          } else {
-            this.$emit('getSummarySuccess')
-            this.startTypingEffect();
-          }
-        }
-      })
-    },
-    regeneration(){
-      let url = "/knowledge-api/knowledge/analyze/summary";
-      let obj = {
-        "mainId": sessionStorage.getItem('_mainId') || localStorage.getItem('_mainId'),
-        "userId": sessionStorage.getItem('_uid') || localStorage.getItem('_uid'),
-        "knowledgeId": this.knowledgeId,
-        "async": false
-      }
-      this.isLoading = true;
-      this.typedContent = "";
-      this.summary = "";
-      this.$http.post(url,obj).then(res => {
-        console.log('regeneration',res)
-        if (res.data.data){
-          this.summary = res.data.data.summary;
-          this.recommendQuestions = res.data.data.recommendQuestions ? res.data.data.recommendQuestions : [];
-          this.$emit('getSummarySuccess')
-          this.startTypingEffect();
-        }
-        this.isLoading = false;
-      })
-    },
-    closeSummary(){
-      this.$emit('closeSummary')
-    },
-    recommendQues(item){
-      this.$emit('recommendQues',item,this.knowledgeId)
-    },
-    startTypingEffect() {
-      let i = 0;
-      const interval = setInterval(() => {
-        if (i < this.summary.length) {
-          this.typedContent += this.summary.charAt(i);
-          i++;
-        } else {
-          clearInterval(interval);
-        }
-      }, this.typingSpeed);
-    },
-  },
-  mounted() {
-    this.getKnowledgeSummary();
-  }
-};
-</script>
-
-<style scoped lang="less">
-.intelligentSummary{
-  background-color: #ffffff;
-  border-radius: 20px;
-  border: 1px solid #366AFF;
-  margin-bottom: 20px;
-  .summaryHeader{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 14px 16px;
-    font-size: 14px;
-    .left{
-      //display: flex;
-      //align-items: center;
-      color: #366aff;
-      i{
-        padding-right: 6px;
-      }
-    }
-    .right{
-      display: flex;
-      align-items: center;
-      color: #366aff;
-      .regenerationBtn{
-        height: 26px;
-        background: #E9EFFF;
-        border-radius: 12px;
-        color: #366AFF;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        padding: 0 10px;
-        margin-right: 10px;
-        font-size: 12px;
-      }
-      i{
-        cursor: pointer;
-        font-size: 14px;
-      }
-    }
-  }
-  .summaryContent{
-    line-height: 26px;
-    padding: 0 16px 16px 16px;
-    font-size: 14px;
-    text-align: left;
-  }
-  .intelligentBottom{
-    background: #F9FAFD;
-    padding: 0 10px;
-    height: 50px;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    .intelligentList{
-      overflow-x: scroll;
-      overflow-y: hidden;
-      display: flex;
-      align-items: center;
-      height: 50px;
-    }
-    .intelligentQues{
-      height: 26px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 8px;
-      background: #E5EBFF;
-      color: #366AFF;
-      border-radius: 10px;
-      margin-right: 10px;
-      font-size: 12px;
-      cursor: pointer;
-      white-space: nowrap;
-    }
-  }
-  ::-webkit-scrollbar{
-    background-color: transparent;
-    height: 6px;
-  }
-}
+<template>
+  <div class="intelligentSummary" id="intelligentSummary">
+    <div class="summaryHeader">
+      <div class="left">
+        <i class="iconfont guoran-tongyichicun-write-29-jiqiren"></i>
+        <span>智能摘要</span>
+      </div>
+      <div class="right">
+        <div class="regenerationBtn" @click="regeneration">
+          <template v-if="!isLoading">重新生成</template>
+          <template v-else>
+            <img
+                height="20px"
+                width="20px"
+                src="https://static.guoranbot.com/loading.gif"
+                alt
+                srcset
+                style="margin-right: 6px"
+            />
+            <span>生成中</span>
+          </template>
+        </div>
+        <i class="iconfont guoran-tongyichicun-shouqi" @click="closeSummary"></i>
+      </div>
+    </div>
+    <div class="summaryContent">
+      <span>{{ typedContent }}</span>
+    </div>
+    <div class="intelligentBottom" v-if="recommendQuestions.length > 0">
+      <div class="intelligentQues"
+           v-for="(item,index) in recommendQuestions"
+           :key="index"
+           @click="recommendQues(item)"
+      >
+        {{ item }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "intelligentSummary",
+  data(){
+    return{
+      summary:"",
+      recommendQuestions:[],
+      isLoading:false,
+      typedContent:"",
+      typingSpeed:20
+    }
+  },
+  props:{
+    knowledgeId:{
+      type:String
+    }
+  },
+  methods:{
+    getKnowledgeSummary() {
+      let url = "/knowledge-api/knowledge/detail/" + this.knowledgeId;
+      this.typedContent = "";
+      this.summary = "";
+      this.$http.get(url).then(res => {
+        console.log('res',res)
+        if (res.data.data){
+          this.summary = res.data.data.summary;
+          this.recommendQuestions = res.data.data.recommendQuestions ? res.data.data.recommendQuestions.splice(0,5) : [];
+          if (!this.summary){
+            this.regeneration();
+          } else {
+            this.typedContent = this.summary;
+          }
+        }
+        this.$nextTick(() => {
+          this.$emit('getSummarySuccess')
+        })
+      })
+    },
+    regeneration(){
+      let url = "/knowledge-api/knowledge/analyze/summary";
+      let obj = {
+        "mainId": sessionStorage.getItem('_mainId') || localStorage.getItem('_mainId'),
+        "userId": sessionStorage.getItem('_uid') || localStorage.getItem('_uid'),
+        "knowledgeId": this.knowledgeId,
+        "async": false
+      }
+      this.isLoading = true;
+      this.typedContent = "";
+      this.summary = "";
+      this.$http.post(url,obj).then(res => {
+        console.log('regeneration',res)
+        if (res.data.data){
+          this.summary = res.data.data.summary;
+          this.recommendQuestions = res.data.data.recommendQuestions ? res.data.data.recommendQuestions.splice(0,5) : [];
+          this.startTypingEffect();
+        } else {
+          this.$nextTick(() => {
+            this.$emit('getSummarySuccess')
+          })
+        }
+        this.isLoading = false;
+      })
+    },
+    closeSummary(){
+      this.$emit('closeSummary')
+    },
+    recommendQues(item){
+      this.$emit('recommendQues',item,this.knowledgeId)
+    },
+    startTypingEffect() {
+      let i = 0;
+      const interval = setInterval(() => {
+        if (i < this.summary.length) {
+          this.typedContent += this.summary.charAt(i);
+          i++;
+        } else {
+          clearInterval(interval);
+          setTimeout(() => {
+            this.$emit('getSummarySuccess')
+          },240)
+        }
+      }, this.typingSpeed);
+    },
+  },
+  mounted() {
+    this.getKnowledgeSummary();
+  }
+};
+</script>
+
+<style scoped lang="less">
+.intelligentSummary{
+  background-color: #ffffff;
+  border-radius: 20px;
+  border: 1px solid #366AFF;
+  margin-bottom: 20px;
+  .summaryHeader{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px;
+    font-size: 14px;
+    .left{
+      //display: flex;
+      //align-items: center;
+      color: #366aff;
+      i{
+        padding-right: 6px;
+      }
+    }
+    .right{
+      display: flex;
+      align-items: center;
+      color: #366aff;
+      .regenerationBtn{
+        height: 26px;
+        background: #E9EFFF;
+        border-radius: 12px;
+        color: #366AFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: 0 10px;
+        margin-right: 10px;
+        font-size: 12px;
+      }
+      i{
+        cursor: pointer;
+        font-size: 14px;
+      }
+    }
+  }
+  .summaryContent{
+    line-height: 26px;
+    padding: 0 16px 16px 16px;
+    font-size: 14px;
+    text-align: left;
+  }
+  .intelligentBottom{
+    background: #F9FAFD;
+    padding: 0 20px;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .intelligentQues{
+      height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 8px;
+      background: #E5EBFF;
+      color: #366AFF;
+      border-radius: 10px;
+      margin-right: 5px;
+      margin-top: 5px;
+      margin-bottom: 5px;
+      font-size: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+  }
+  ::-webkit-scrollbar{
+    background-color: transparent;
+    height: 6px;
+  }
+}
 </style>