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

<script lang="ts">
export default {
  name: "连接线",
};
</script>

<script setup lang="ts">
import { onMounted, ref, nextTick } from "vue";
import { ElForm, ElMessage, ElMessageBox, selectEmits } from "element-plus";
const emit = defineEmits(['closeConnectingwireModel']);
const props = defineProps({
  connectingwireInfo: {
    required: false,
    type: Object,
    default: {}
  },
})
const connectingwireInfo:any = ref(props.connectingwireInfo);
const connectingwireList:any = ref([
  {
    label: "实线",
    strokeDasharray: "0",
  },
  {
    label: "短虚线",
    strokeDasharray: "5 5",
  },{
    label: "中等虚线",
    strokeDasharray: "8 4",
  },{
    label: "长虚线",
    strokeDasharray: "10 5",
  },{
    label: "超长虚线",
    strokeDasharray: "15 5",
  },{
    label: "经典点线",
    strokeDasharray: "2 2",
  },{
    label: "稀疏点线",
    strokeDasharray: "1 5",
  },{
    label: "密集点线",
    strokeDasharray: "1 2",
  },{
    label: "标准点划线",
    strokeDasharray: "10 3 2 3",
  },{
    label: "长点划线",
    strokeDasharray: "15 5 3 5",
  },{
    label: "双点划线",
    strokeDasharray: "10 3 2 3 2 3",
  },
  
  
  {
    label: "间隔长虚线",
    strokeDasharray: "15 8",
  },{
    label: "细密虚线",
    strokeDasharray: "3 2",
  },{
    label: "方块图案",
    strokeDasharray: "8 4 1 4",
  },{
    label: "交替长短线",
    strokeDasharray: "10 3 5 3",
  },{
    label: "渐进虚线",
    strokeDasharray: "2 2 4 2 6 2",
  },
]);

function connectingwireClick(row: any) {
  connectingwireInfo.value.label = row.label
  connectingwireInfo.value.strokeDasharray = row.strokeDasharray
}
function handleClose() {
  emit("closeConnectingwireModel",false);
}
function confirmClick() {
  connectingwireInfo.value.color = customizeInfo.value.color
  emit("closeConnectingwireModel", connectingwireInfo.value);
}
const customizeInfo:any = ref({
  label: "自定义",
  strokeDasharray: "",
  color: "#a2b1c3",
})
function connectingwireInput(e:any) {
  connectingwireInfo.value.strokeDasharray = e
}
onMounted(() => {
  if(connectingwireInfo.value.label === '自定义'){
   customizeInfo.value.strokeDasharray = connectingwireInfo.value.strokeDasharray
  }
 
});

</script>

<template>
  <div class="connectingwire-box">
    <div>箭头</div>
    <el-radio-group v-model="connectingwireInfo.arrow">
      <el-radio label="0">无箭头</el-radio>
      <el-radio label="1">单箭头</el-radio>
      <el-radio label="2">双箭头</el-radio>
    </el-radio-group>
     <div style="margin-top: 20px;margin-bottom: 10px;">线宽</div>
    <el-radio-group v-model="connectingwireInfo.strokeWidth">
      <el-radio :label="1">1px</el-radio>
      <el-radio :label="2">2px</el-radio>
      <el-radio :label="3">3px</el-radio>
      <el-radio :label="4">4px</el-radio>
      <el-radio :label="5">5px</el-radio>
      <el-radio :label="6">6px</el-radio>
      <el-radio :label="7">7px</el-radio>
      <el-radio :label="8">8px</el-radio>
      <el-radio :label="9">9px</el-radio>
      <el-radio :label="10">10px</el-radio>
    </el-radio-group>
    <div style="margin-top: 20px;margin-bottom: 10px;">线形</div>
    <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>
      <div style="display: flex;align-items: center">
          <div  class="connectingwire-li" :class="{'active': connectingwireInfo.label === '自定义'}" @click="connectingwireClick(customizeInfo)">
          <div>{{ customizeInfo.label }}</div>
       
      </div>
         <el-input v-model="customizeInfo.strokeDasharray" @click.stop="connectingwireClick(customizeInfo)" @input="connectingwireInput" :disabled="connectingwireInfo.label !== '自定义'"
           placeholder="请输入自定义虚线样式" style="width: 180px;"></el-input>
      </div>
     
    </div>
      <div style="margin-top: 20px;margin-bottom: 10px;">颜色</div>
       <el-color-picker-panel v-model="customizeInfo.color" />
     <span class="dialog-footer"
      style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="confirmClick">确 定</el-button>
    </span>
  </div>

</template>

<style scoped>
.connectingwire-ul{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.connectingwire-li{
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 5px;
  cursor: pointer;
}
.connectingwire-customize{
  width: 200px;
  height: 80px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.connectingwire-li:hover ,.connectingwire-customize:hover{
  border-color: #0398fc;
}
.connectingwire-li.active,.connectingwire-customize.active{
  background: #0398fc;
  color: #fff;
}
</style>