vue-wiring-diagram 1.0.20 → 1.1.0

package/packages/components/edge-control/index.vue

@@ -1,353 +1,87 @@
 /**
 * @Author: HuaYJ
-* @Date: 2024/10/24 09:42
+* @Date: 2025/4/9 09:22
 */
 <template>
   <div class="container">
-    <el-collapse v-model="activeName" accordion>
-      <el-collapse-item title="线段设置" name="0">
-        <div class="row-column">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">类型</div>
-            </el-col>
-            <el-col :span="12">
-              <el-select v-model="type" placeholder="请选择线段类型" clearable size="small" @change="changeType">
-                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">颜色1</div>
-            </el-col>
-            <el-col :span="12">
-              <el-color-picker v-model="stroke1" :show-alpha="true" size="small" @change="changeLine"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20" v-if="type === 'pipe'">
-            <el-col :span="12">
-              <div class="row-label">颜色2</div>
-            </el-col>
-            <el-col :span="12">
-              <el-color-picker v-model="stroke2" :show-alpha="true" size="small" @change="changeLine"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">粗细</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="strokeWidth" size="small" controls-position="right" @change="changeLine" :min="1" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-        </div>
-      </el-collapse-item>
-      <el-collapse-item v-if="type === 'pipe'" title="管道设置" name="3">
-        <div class="row-column">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">管道间隔</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="strokeDasharray" size="small" controls-position="right" @change="changeLine" :min="5" :max="100"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">默认流动方向</div>
-            </el-col>
-            <el-col :span="12">
-              <el-select v-model="strokeDashoffset" placeholder="请选择管道方向" size="small" @change="changeLine">
-                <el-option v-for="item in directionList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">参数设置</div>
-            </el-col>
-            <el-col :span="12">
-              <el-select v-model="deviceCode" placeholder="请选择设备" @change="checkDevice" size="small" filterable clearable >
-                <el-option v-for="item in deviceList" :key="item.deviceCode" :label="item.deviceName" :value="item.deviceCode"/>
-              </el-select>
-              <el-select v-model="fieldCode" placeholder="请选择字段" @change="checkField" size="small" filterable clearable style="margin-top: 10px">
-                <el-option v-for="item in fieldList" :key="item.dataField" :label="item.name" :value="item.dataField"/>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">条件配置</div>
-            </el-col>
-            <el-col :span="12">
-              <el-switch v-model="isCondition" :active-value="true" :inactive-value="false" size="small" @change="changeCondition"/>
-              <el-button type="primary" size="small" @click="showCondition" style="margin-left: 10px">配置</el-button>
-            </el-col>
-          </el-row>
-        </div>
-      </el-collapse-item>
-      <el-collapse-item title="箭头1设置" name="1">
-        <div class="row-column">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">类型</div>
-            </el-col>
-            <el-col :span="12">
-              <el-select v-model="sourceMarker.name" placeholder="请选择箭头类型" clearable size="small" @change="changeLine">
-                <el-option v-for="item in arrowList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">宽</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="sourceMarker.args.width" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">高</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="sourceMarker.args.height" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">偏移</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="sourceMarker.args.offset" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-        </div>
-      </el-collapse-item>
-      <el-collapse-item title="箭头2设置" name="2">
-        <div class="row-column">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">类型</div>
-            </el-col>
-            <el-col :span="12">
-              <el-select v-model="targetMarker.name" placeholder="请选择箭头类型" clearable size="small" @change="changeLine">
-                <el-option v-for="item in arrowList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">宽</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="targetMarker.args.width" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">高</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="targetMarker.args.height" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">偏移</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="targetMarker.args.offset" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-    <el-dialog v-model="dialogCondition.show" width="500px" title="条件配置" :show-close="false" :close-on-click-modal="false"
-               :close-on-press-escape="false">
-      <condition v-if="dialogCondition.show" :payload="dialogCondition.payload" @close="closeCondition"></condition>
-    </el-dialog>
+    <div class="row-column" style="padding: 0 1px 10px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="row-label">线段类型</div>
+        </el-col>
+        <el-col :span="12">
+          <el-select v-model="type" placeholder="请选择线段类型" clearable size="small" @change="changeType">
+            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-col>
+      </el-row>
+    </div>
+    <component :is="component" :payload="payload"></component>
   </div>
 </template>
 
 <script setup>
-import {onMounted, reactive, ref} from "vue";
-import {lineOptions} from "../settings.js";
-import {setPipeDirection} from "packages/components/tools.js";
-import {arrowList, directionList, STOP, typeList} from "packages/components/enums.js";
-import Condition from "packages/components/edge-control/condition.vue";
-import {getDeviceList, getFieldList} from "packages/components/common.js";
+import {ARROW, LINE, PIPE, typeList} from "packages/components/enums.js";
+import {onMounted, ref, shallowRef} from "vue";
+import {arrowOptions, defaultLine, lineOptions, pipeOptions} from "packages/components/settings.js";
+import DefaultLine from "packages/components/edge-control/default-line.vue";
+import PipeLine from "packages/components/edge-control/pipe-line.vue";
+import ArrowLine from "packages/components/edge-control/arrow-line.vue";
 
 const props = defineProps({
   payload: Object
 })
 
-const activeName = ref('0')
-
+// 线段类型
 const type = ref(props.payload.data.type)
-const stroke1 = ref(props.payload.attrs.line2.stroke)
-const stroke2 = ref(props.payload.attrs.line1.stroke)
-const strokeWidth = ref(props.payload.attrs.line1.strokeWidth)
-const strokeDasharray = ref(props.payload.attrs.line2.strokeDasharray)
-const strokeDashoffset = ref(props.payload.attrs.line2?.style?.animation.split(' ')[0] ?? STOP)
-const sourceMarker = reactive({
-  name: props.payload.attrs.line2.sourceMarker?.name ?? null,
-  args: props.payload.attrs.line2.sourceMarker?.args ?? {}
-})
-const targetMarker = reactive({
-  name: props.payload.attrs.line2.targetMarker?.name ?? null,
-  args: props.payload.attrs.line2.targetMarker?.args ?? {}
-})
 
 /**
- * 线段属性改变
- */
-const changeLine = () => {
-  props.payload.attr('line1/stroke', stroke2.value)
-  props.payload.attr('line2/stroke', stroke1.value)
-  props.payload.attr('line1/strokeWidth', strokeWidth.value)
-  props.payload.attr('line2/strokeWidth', strokeWidth.value)
-  props.payload.attr('line2/strokeDasharray', strokeDasharray.value)
-  props.payload.attr('line2/sourceMarker/name', sourceMarker.name)
-  props.payload.attr('line2/sourceMarker/args', sourceMarker.args)
-  props.payload.attr('line2/targetMarker/name', targetMarker.name)
-  props.payload.attr('line2/targetMarker/args', targetMarker.args)
-  props.payload.attr('line2/style/animation', setPipeDirection(strokeDashoffset.value))
-  lineOptions.markup = props.payload.markup
-  lineOptions.attrs = props.payload.attrs
-  console.log('线-基础配置', lineOptions)
-  console.log('线-当前配置', props.payload)
-}
-
-/**
- * 线段类型改变
+ * 更改线段类型
  */
 const changeType = () => {
-  if (type.value === 'line') {
-    props.payload.attr('line2/strokeDasharray', 0)
-  } else if (type.value === 'pipe') {
-    props.payload.attr('line2/strokeDasharray', 5)
-  }
-  props.payload.attr('line2/style/animation', setPipeDirection('none'))
-  lineOptions.markup = props.payload.markup
-  lineOptions.attrs = props.payload.attrs
   props.payload.data.type = type.value
-  console.log('线-基础配置', lineOptions)
-  console.log('线-当前配置', props.payload)
-}
-
-// 条件线是否开启
-const isCondition = ref(props.payload.data.isCondition ?? false)
-
-/**
- * 条件线改变
- */
-const changeCondition = () => {
-  props.payload.data.isCondition = isCondition.value
-}
-
-// 条件线配置
-const dialogCondition = reactive({
-  show: false,
-  payload: null
-})
-
-/**
- * 条件线配置显示
- */
-const showCondition = () => {
-  dialogCondition.show = true
-  dialogCondition.payload = props.payload.data.condition ?? []
-}
-
-/**
- * 条件线配置关闭
- * @param condition
- */
-const closeCondition = (condition) => {
-  dialogCondition.show = false
-  dialogCondition.payload = null
-  if (condition) {
-    props.payload.data.condition = condition
+  if (type.value === LINE) {
+    lineOptions.attrs = defaultLine.attrs
+    lineOptions.markup = defaultLine.markup
   }
-  console.log('条件线', props.payload.data)
-}
-
-const deviceList = ref([]) // 设备列表
-const deviceCode = ref(props.payload.data?.fields?.[0]?.deviceCode ?? '') // 设备编码
-const fieldCode = ref(props.payload.data?.fields?.[0]?.field ?? '') // 字段编码
-
-/**
- * 获取设备列表
- */
-const getDevices = async () => {
-  deviceList.value = await getDeviceList()
-  if (deviceCode.value) {
-    checkDevice()
+  if (type.value === PIPE) {
+    lineOptions.attrs = pipeOptions.attrs
+    lineOptions.markup = pipeOptions.markup
   }
-}
-
-let currentDevice = reactive({}) // 当前设备信息
-
-/**
- * 监听设备编码变化
- */
-const checkDevice = () => {
-  currentDevice = deviceList.value.find(item => item.deviceCode === deviceCode.value)
-  if (currentDevice) {
-    getFields()
-    props.payload.data.fields = [{
-      index: 0,
-      deviceName: currentDevice.deviceName,
-      deviceCode: currentDevice.deviceCode,
-      field: fieldCode.value ?? '',
-    }]
-    fieldCode.value = props.payload.data.fields[0].field
-  } else {
-    fieldCode.value = ''
-    props.payload.data.fields = []
+  if (type.value === ARROW) {
+    lineOptions.attrs = arrowOptions.attrs
+    lineOptions.markup = arrowOptions.markup
   }
-  console.log('管道配置', props.payload)
+  props.payload.attrs = null
+  props.payload.attr(lineOptions.attrs)
+  props.payload.markup = lineOptions.markup
+  setComponent()
 }
 
-const fieldList = ref([])
-
-/**
- * 获取字段列表
- */
-const getFields = async () => {
-  fieldList.value = await getFieldList(currentDevice.deviceCode)
-}
+// 组件
+const component = shallowRef(null)
 
 /**
- * 监听字段编码变化
+ * 设置组件
  */
-const checkField = () => {
-  props.payload.data.fields = [{
-    index: 0,
-    deviceName: currentDevice.deviceName,
-    deviceCode: currentDevice.deviceCode,
-    field: fieldCode.value ?? '',
-  }]
-  console.log('管道配置', props.payload)
+const setComponent = () => {
+  component.value = null
+  if (type.value === LINE) {
+    component.value = DefaultLine
+  }
+  if(type.value === PIPE) {
+    component.value = PipeLine
+  }
+  if(type.value === ARROW) {
+    component.value = ArrowLine
+  }
 }
 
 onMounted(() => {
-  getDevices()
+  setComponent()
 })
+
 </script>
 
 <style scoped lang="scss">