feat: 知识图谱引力调整

src/layouts/components/HoverButton/index.vue

@@ -7,44 +7,135 @@
 -->
 
 <template>
-  <div>
-    <div
-      ref="floatButton"
-      class="float_info"
-      @click="onBtnClicked"
-    />
+  <div class="HoverButton">
+    <el-popover
+      placement="left"
+      width="240"
+      trigger="click"
+    >
+      <div class="HoverButton-main">
+        <div class="main-new-item" @click="onBtnClicked">
+          <img src="@/assets/common/new.png" alt="">
+          <span>新对话</span>
+        </div>
+        <div class="main-message-item">
+          <img src="@/assets/common/message.png" alt="">
+          <span>历史对话</span>
+          <i class="el-icon-arrow-down el-icon--right" />
+        </div>
+        <div class="case-list">
+          <span v-for="(item,index) in caseList" :key="index" class="case-item">{{ item.caseName }}</span>
+        </div>
+      </div>
+      <div
+        ref="floatButton"
+        slot="reference"
+        class="float_info"
+      />
+    </el-popover>
+
     <!--对话弹窗-->
-    <conversation-dialog ref="conversion"/>
+    <conversation-dialog ref="conversion" />
   </div>
 </template>
 <script>
+import { conversationList } from '@/api/caseManagement'
 export default {
+
   name: 'HoverButton',
   data() {
     return {
-
+      caseList: [
+  
+      ]
     }
   },
+  mounted() {
+    this.getList()
+  },
   methods: {
     onBtnClicked() {
       this.$refs.conversion.show()
-    }
+    },
+    // 查询列表
+    async getList() {
+      const res = await conversationList({
+        pageNum: 1,
+        pageSize: 99999
+      })
+      if (res.code === 200) {
+        this.caseList = res.data.records.splice(0, 3)
+      }
+    },
   }
 }
 </script>
 <style lang="scss" scoped>
-.float_info {
-  position: fixed;
-  bottom: 120px;
-  right: 2%;
-  width: 50px;
-  height: 50px;
-  margin: 5px 10px;
-  display: flex;
-  z-index: 999;
-  cursor: pointer;
-  background: url("~@/assets/home/anjianzhushou@2x.png") center no-repeat;
-  background-size: 100% 100%;
+.HoverButton {
+  .float_info {
+    position: fixed;
+    bottom: 120px;
+    right: 2%;
+    width: 50px;
+    height: 50px;
+    margin: 5px 10px;
+    display: flex;
+    z-index: 999;
+    cursor: pointer;
+    background: url("~@/assets/home/anjianzhushou@2x.png") center no-repeat;
+    background-size: 100% 100%;
+  }
 }
-
+.HoverButton-main {
+    // padding: 16px;
+    .main-new-item {
+      display: flex;
+      background: rgba(55,99,255,0.1);
+      border-radius: 8px 8px 8px 8px;
+      border: 1px solid #3763FF;
+      height: 49px;
+      align-items: center;
+      padding-left: 16px;
+      cursor: pointer;
+      img {
+        width: 18px;
+        height: 18px;
+      }
+      span {
+        font-size: 16px;
+        color: #3763FF;
+        margin-left: 10px;
+      }
+    }
+    .main-message-item {
+      display: flex; height: 49px;
+      align-items: center;
+      padding-left: 16px;
+      cursor: pointer;
+      img {
+        width: 18px;
+        height: 18px;
+      }
+      span {
+        font-size: 16px;
+        color: #333333;
+        margin-left: 10px;
+        margin-right: 100px;
+      }
+    }
+    .case-list {
+      display: flex;
+      flex-direction: column;
+      .case-item {
+        height: 34px;font-size: 14px;
+        color: #666666;
+        padding-left: 45px;
+        line-height: 34px;
+        cursor: pointer;
+      }
+      .case-item:hover {
+        background: #F5F5F5;
+      }
+    }
+  }
 </style>

src/views/caseDetails/components/CaseAtlas.vue

@@ -176,7 +176,6 @@ export default {
             lightColor: e.itemStyle.lightColor,
             selected: false
           })
-
         })
         res.data.relTypes.forEach(e => {
           this.relTypes.push({
@@ -198,6 +197,7 @@ export default {
     selectItem(item) {
       this.searchName = ''
       this.$set(item, 'selected', !item.selected)
+      this.$forceUpdate()
       this.queryCaseGraph()
     }
   }

src/views/caseDetails/js/caseAtlasConfig.js

@@ -72,9 +72,9 @@ const caseAtlasConfig = {
         }
       },
       force: {
-        repulsion: 200, // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
-        gravity: 0.01, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
-        edgeLength: 400, // 边的两个节点之间的距离，这个距离也会受 repulsion影响 。值越大则长度越长
+        repulsion: 2000, // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
+        gravity: 0, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
+        edgeLength: 500, // 边的两个节点之间的距离，这个距离也会受 repulsion影响 。值越大则长度越长
         layoutAnimation: true // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画
         // 在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
       },