修改连接线样式

.trae/.ignore

@@ -0,0 +1,5 @@
+**/node_modules
+**/dist
+**/build
+**/target
+*.log

business-css/frontend/src/components/antvx6/connectingwire.vue

@@ -7,6 +7,23 @@ export default {
 <script setup lang="ts">
 import { onMounted, ref, nextTick } from "vue";
 import { ElForm, ElMessage, ElMessageBox, selectEmits } from "element-plus";
+import img1 from '@/assets/line/1.png'
+import img2 from '@/assets/line/2.png'
+import img3 from '@/assets/line/3.png'
+import img4 from '@/assets/line/4.png'
+import img5 from '@/assets/line/5.png'
+import img6 from '@/assets/line/6.png'
+import img7 from '@/assets/line/7.png'
+import img8 from '@/assets/line/8.png'
+import img9 from '@/assets/line/9.png'
+import img10 from '@/assets/line/10.png'
+import img11 from '@/assets/line/11.png'
+import img12 from '@/assets/line/12.png'
+import img13 from '@/assets/line/13.png'
+import img14 from '@/assets/line/14.png'
+import img15 from '@/assets/line/15.png'
+import img16 from '@/assets/line/16.png'
+
 const emit = defineEmits(['closeConnectingwireModel']);
 const props = defineProps({
   connectingwireInfo: {
@@ -20,55 +37,71 @@ const connectingwireList:any = ref([
   {
     label: "实线",
     strokeDasharray: "0",
+    img:img1,
   },
   {
     label: "短虚线",
     strokeDasharray: "5 5",
+    img:img2,
   },{
     label: "中等虚线",
     strokeDasharray: "8 4",
+    img:img3,
   },{
     label: "长虚线",
     strokeDasharray: "10 5",
+    img:img4,
   },{
     label: "超长虚线",
     strokeDasharray: "15 5",
+    img:img5,
   },{
     label: "经典点线",
     strokeDasharray: "2 2",
+    img:img6,
   },{
     label: "稀疏点线",
-    strokeDasharray: "1 5",
+    strokeDasharray: "1 5", 
+    img:img7,
   },{
     label: "密集点线",
     strokeDasharray: "1 2",
+    img:img8,
   },{
     label: "标准点划线",
     strokeDasharray: "10 3 2 3",
+    img:img9,
   },{
     label: "长点划线",
     strokeDasharray: "15 5 3 5",
+    img:img10,
   },{
     label: "双点划线",
     strokeDasharray: "10 3 2 3 2 3",
+    img:img11,
   },
   
   
   {
     label: "间隔长虚线",
     strokeDasharray: "15 8",
+    img:img12,
   },{
     label: "细密虚线",
     strokeDasharray: "3 2",
+    img:img13,
   },{
     label: "方块图案",
     strokeDasharray: "8 4 1 4",
+    img:img14,
   },{
     label: "交替长短线",
     strokeDasharray: "10 3 5 3",
+    img:img15,
   },{
     label: "渐进虚线",
     strokeDasharray: "2 2 4 2 6 2",
+    img:img16,
   },
 ]);
 
@@ -125,7 +158,9 @@ onMounted(() => {
     <div class="connectingwire-ul">
       <div class="connectingwire-li"  v-for="item in connectingwireList" :class="{'active': connectingwireInfo.label === item.label}"
       :key="item.value" @click="connectingwireClick(item)">
-        <div>{{item.label}}</div>
+        <div style="margin-bottom: 5px;">{{item.label}}</div>
+        <img :src="item.img" alt="">
+        
       </div>
       <div style="display: flex;align-items: center">
           <div  class="connectingwire-li" :class="{'active': connectingwireInfo.label === '自定义'}" @click="connectingwireClick(customizeInfo)">
@@ -157,8 +192,10 @@ onMounted(() => {
 .connectingwire-li{
   width: 80px;
   height: 80px;
-  line-height: 80px;
-  text-align: center;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  flex-wrap: wrap;
   border: 1px solid #ccc;
   margin: 5px;
   cursor: pointer;

business-css/frontend/src/components/antvx6/index.vue

@@ -1446,8 +1446,8 @@ function saveDesign() { // 保存设计
         </div>
 
           <div class="operation-icon-box" @click="ConnectingwireClick">
-          <img v-if="isDisplay" src="@/assets/x6/display.png">
-          <img v-else src="@/assets/x6/hide.png">
+      
+          <img src="@/assets/x6/line.png" style="margin: 5px  0;">
           <div class="operation-icon-text">连接线</div>
         </div>