vue-wiring-diagram 1.1.22 → 1.1.24

package/packages/components/enums.js

@@ -1,80 +1,80 @@
-export const LINE = 'line'
-export const PIPE = 'pipe'
-export const ARROW = 'arrow'
-
-// 线类型
-export const typeList = [{
-    label: '直线',
-    value: LINE,
-}, {
-    label: '管道',
-    value: PIPE,
-}, {
-    label: '箭头',
-    value: ARROW,
-}]
-
-// 箭头类型
-export const arrowList = [
-    {
-        label: 'Block',
-        value: 'block'
-    },
-    {
-        label: 'Classic',
-        value: 'classic'
-    },
-    {
-        label: 'Diamond',
-        value: 'diamond'
-    },
-    {
-        label: 'Cross',
-        value: 'cross'
-    },
-    {
-        label: 'Async',
-        value: 'async'
-    },
-    {
-        label: 'Circle',
-        value: 'circle'
-    },
-    {
-        label: 'CirclePlus',
-        value: 'circlePlus'
-    },
-    {
-        label: 'Ellipse',
-        value: 'ellipse'
-    },
-]
-
-export const STOP = 'stop'
-export const FORWARD_PIPE = 'forward-pipe'
-export const REVERSE_PIPE = 'reverse-pipe'
-
-// 管道方向
-export const directionList = [{
-    label: '停止',
-    value: STOP,
-}, {
-    label: '正向',
-    value: FORWARD_PIPE,
-}, {
-    label: '反向',
-    value: REVERSE_PIPE,
-}]
-
-export const FLASHING = 'flashing'
-export const ARROWFORWARD = 'arrowForward'
-export const ARROWBACKWORD = 'arrowBackward'
-
-// 箭头方向
-export const arrowDirection = [{
-    label: '正向',
-    value: ARROWFORWARD,
-}, {
-    label: '反向',
-    value: ARROWBACKWORD,
-}]
+export const LINE = 'line'
+export const PIPE = 'pipe'
+export const ARROW = 'arrow'
+
+// 线类型
+export const typeList = [{
+    label: '直线',
+    value: LINE,
+}, {
+    label: '管道',
+    value: PIPE,
+}, {
+    label: '箭头',
+    value: ARROW,
+}]
+
+// 箭头类型
+export const arrowList = [
+    {
+        label: 'Block',
+        value: 'block'
+    },
+    {
+        label: 'Classic',
+        value: 'classic'
+    },
+    {
+        label: 'Diamond',
+        value: 'diamond'
+    },
+    {
+        label: 'Cross',
+        value: 'cross'
+    },
+    {
+        label: 'Async',
+        value: 'async'
+    },
+    {
+        label: 'Circle',
+        value: 'circle'
+    },
+    {
+        label: 'CirclePlus',
+        value: 'circlePlus'
+    },
+    {
+        label: 'Ellipse',
+        value: 'ellipse'
+    },
+]
+
+export const STOP = 'stop'
+export const FORWARD_PIPE = 'forward-pipe'
+export const REVERSE_PIPE = 'reverse-pipe'
+
+// 管道方向
+export const directionList = [{
+    label: '停止',
+    value: STOP,
+}, {
+    label: '正向',
+    value: FORWARD_PIPE,
+}, {
+    label: '反向',
+    value: REVERSE_PIPE,
+}]
+
+export const FLASHING = 'flashing'
+export const ARROWFORWARD = 'arrowForward'
+export const ARROWBACKWORD = 'arrowBackward'
+
+// 箭头方向
+export const arrowDirection = [{
+    label: '正向',
+    value: ARROWFORWARD,
+}, {
+    label: '反向',
+    value: ARROWBACKWORD,
+}]

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

@@ -1,121 +1,121 @@
-/**
-* @Author: HuaYJ
-* @Date: 2024/10/22 12:56
-*/
-<template>
-  <div class="control">
-    <el-collapse v-model="activeName" accordion>
-      <el-collapse-item title="基础属性" 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-color-picker v-model="color" size="small" show-alpha @change="changeColor"/>
-            </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="visible" :active-value="true" :inactive-value="false" size="small" @change="changeGrid"/>
-            </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="size" :min="1" :max="20" size="small" controls-position="right" @change="changeGrid"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">主网格颜色</div>
-            </el-col>
-            <el-col :span="12">
-              <el-color-picker v-model="gridColor" size="small" show-alpha @change="changeGrid"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">次网格颜色</div>
-            </el-col>
-            <el-col :span="12">
-              <el-color-picker v-model="gridColor2" size="small" show-alpha @change="changeGrid"/>
-            </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="thickness" :min=".5" :max="10" size="small" controls-position="right" @change="changeGrid"/>
-            </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="thickness2" :min=".5" :max="10" size="small" controls-position="right" @change="changeGrid"/>
-            </el-col>
-          </el-row>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-
-<script setup>
-
-import {ref} from "vue";
-
-const props = defineProps({
-  payload: Object
-})
-const color = ref(props.payload.value.options.background?.color || null) // 画布背景颜色
-const visible = ref(props.payload.value.options?.grid?.visible || null) // 网格是否显示
-const size = ref(props.payload.value.options?.grid?.size || 10) // 网格大小
-const gridColor = ref(props.payload.value.options?.grid?.args?.[0]?.color || null) // 主网格颜色
-const thickness = ref(props.payload.value.options?.grid?.args?.[0]?.thickness || 1) // 主网格粗细
-const gridColor2 = ref(props.payload.value.options?.grid?.args?.[1]?.color || null) // 次网格颜色
-const thickness2 = ref(props.payload.value.options?.grid?.args?.[1]?.thickness || 1) // 次网格粗细
-const activeName = ref('1')// 控制面板激活项
-
-/**
- * 修改画布背景颜色
- * @param color
- */
-const changeColor = (color) => {
-  props.payload.value.drawBackground({
-    color: color
-  })
-}
-
-/**
- * 修改网格类型
- */
-const changeGrid = () => {
-  props.payload.value.drawGrid({
-    visible: visible.value,
-    size: size.value,
-    type: 'doubleMesh',
-    args: [
-      {
-        color: gridColor.value,
-        thickness: thickness.value
-      }, {
-        color: gridColor2.value,
-        thickness: thickness2.value
-      }
-    ]
-  })
-}
-</script>
-
-<style scoped lang="scss">
-@use "packages/styles/editor";
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2024/10/22 12:56
+*/
+<template>
+  <div class="control">
+    <el-collapse v-model="activeName" accordion>
+      <el-collapse-item title="基础属性" 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-color-picker v-model="color" size="small" show-alpha @change="changeColor"/>
+            </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="visible" :active-value="true" :inactive-value="false" size="small" @change="changeGrid"/>
+            </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="size" :min="1" :max="20" size="small" controls-position="right" @change="changeGrid"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">主网格颜色</div>
+            </el-col>
+            <el-col :span="12">
+              <el-color-picker v-model="gridColor" size="small" show-alpha @change="changeGrid"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">次网格颜色</div>
+            </el-col>
+            <el-col :span="12">
+              <el-color-picker v-model="gridColor2" size="small" show-alpha @change="changeGrid"/>
+            </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="thickness" :min=".5" :max="10" size="small" controls-position="right" @change="changeGrid"/>
+            </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="thickness2" :min=".5" :max="10" size="small" controls-position="right" @change="changeGrid"/>
+            </el-col>
+          </el-row>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup>
+
+import {ref} from "vue";
+
+const props = defineProps({
+  payload: Object
+})
+const color = ref(props.payload.value.options.background?.color || null) // 画布背景颜色
+const visible = ref(props.payload.value.options?.grid?.visible || null) // 网格是否显示
+const size = ref(props.payload.value.options?.grid?.size || 10) // 网格大小
+const gridColor = ref(props.payload.value.options?.grid?.args?.[0]?.color || null) // 主网格颜色
+const thickness = ref(props.payload.value.options?.grid?.args?.[0]?.thickness || 1) // 主网格粗细
+const gridColor2 = ref(props.payload.value.options?.grid?.args?.[1]?.color || null) // 次网格颜色
+const thickness2 = ref(props.payload.value.options?.grid?.args?.[1]?.thickness || 1) // 次网格粗细
+const activeName = ref('1')// 控制面板激活项
+
+/**
+ * 修改画布背景颜色
+ * @param color
+ */
+const changeColor = (color) => {
+  props.payload.value.drawBackground({
+    color: color
+  })
+}
+
+/**
+ * 修改网格类型
+ */
+const changeGrid = () => {
+  props.payload.value.drawGrid({
+    visible: visible.value,
+    size: size.value,
+    type: 'doubleMesh',
+    args: [
+      {
+        color: gridColor.value,
+        thickness: thickness.value
+      }, {
+        color: gridColor2.value,
+        thickness: thickness2.value
+      }
+    ]
+  })
+}
+</script>
+
+<style scoped lang="scss">
+@use "packages/styles/editor";
+</style>

package/packages/components/image-control/group-form.vue

@@ -1,114 +1,114 @@
-/**
-* @Author: HuaYJ
-* @Date: 2025/2/8 09:22
-*/
-<template>
-    <div class="form-container">
-        <el-form ref="form" :model="model" :rules="rules" label-width="90px" label-suffix=":">
-            <el-form-item label="分组名称" prop="groupName">
-                <el-input v-model="model.groupName" placeholder="请输入分组名称" clearable/>
-            </el-form-item>
-            <el-form-item label="排序" prop="sort">
-                <el-input-number v-model="model.sort" :min="0" :max="999" :step="1" controls-position="right"/>
-            </el-form-item>
-            <el-form-item label="是否显示" prop="isShow">
-                <el-switch v-model="model.isShow" :active-value="1" :inactive-value="0" active-color="#13ce66"
-                           inactive-color="#ff4949"/>
-            </el-form-item>
-            <div class="footer">
-                <el-button type="primary" @click="saveBtnClick">保存</el-button>
-                <el-button @click="cancelBtnClick">取消</el-button>
-            </div>
-        </el-form>
-    </div>
-</template>
-
-<script setup>
-import {onMounted, reactive, ref} from "vue";
-import {post} from "../../http.js";
-import {ElMessage} from "element-plus";
-
-const props = defineProps({
-    payload: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-})
-
-const emits = defineEmits(['close'])
-
-const model = reactive({
-    groupName: '',
-    sort: 1,
-    isShow: 1
-})
-const rules = reactive({
-    groupName: [
-        {required: true, message: '请输入分组名称', trigger: 'blur'},
-        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
-    ],
-    sort: [
-        {required: true, message: '请输入排序', trigger: 'blur'},
-        {type: 'number', message: '排序必须为数字值'}
-    ],
-    isShow: [
-        {required: true, message: '请选择是否显示', trigger: 'change'}
-    ]
-})
-
-const form = ref()
-
-/**
- * 保存按钮点击事件
- */
-const saveBtnClick = () => {
-    console.log(model)
-    form.value.validate((valid) => {
-        if (valid) {
-            if (!model.id) {
-                post('/custom/saveGroup', model).then(res => {
-                    if (res?.isOk) {
-                        ElMessage.success('保存成功')
-                        emits('close', true)
-                    } else {
-                        ElMessage.error(res?.msg || '保存失败')
-                    }
-                })
-            } else {
-                post('/custom/updateGroup', model).then(res => {
-                    if (res?.isOk) {
-                        ElMessage.success('保存成功')
-                        emits('close', true)
-                    } else {
-                        ElMessage.error(res?.msg || '保存失败')
-                    }
-                })
-            }
-        } else {
-            return false;
-        }
-    })
-}
-
-/**
- * 取消按钮点击事件
- */
-const cancelBtnClick = () => {
-    emits('close', false)
-}
-
-onMounted(() => {
-    if (props.payload?.id) {
-        model.id = props.payload.id
-        model.groupName = props.payload.groupName
-        model.sort = props.payload.sort
-        model.isShow = props.payload.isShow
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-@use "../../styles/dialog.scss";
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2025/2/8 09:22
+*/
+<template>
+    <div class="form-container">
+        <el-form ref="form" :model="model" :rules="rules" label-width="90px" label-suffix=":">
+            <el-form-item label="分组名称" prop="groupName">
+                <el-input v-model="model.groupName" placeholder="请输入分组名称" clearable/>
+            </el-form-item>
+            <el-form-item label="排序" prop="sort">
+                <el-input-number v-model="model.sort" :min="0" :max="999" :step="1" controls-position="right"/>
+            </el-form-item>
+            <el-form-item label="是否显示" prop="isShow">
+                <el-switch v-model="model.isShow" :active-value="1" :inactive-value="0" active-color="#13ce66"
+                           inactive-color="#ff4949"/>
+            </el-form-item>
+            <div class="footer">
+                <el-button type="primary" @click="saveBtnClick">保存</el-button>
+                <el-button @click="cancelBtnClick">取消</el-button>
+            </div>
+        </el-form>
+    </div>
+</template>
+
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+import {post} from "../../http.js";
+import {ElMessage} from "element-plus";
+
+const props = defineProps({
+    payload: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+const emits = defineEmits(['close'])
+
+const model = reactive({
+    groupName: '',
+    sort: 1,
+    isShow: 1
+})
+const rules = reactive({
+    groupName: [
+        {required: true, message: '请输入分组名称', trigger: 'blur'},
+        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
+    ],
+    sort: [
+        {required: true, message: '请输入排序', trigger: 'blur'},
+        {type: 'number', message: '排序必须为数字值'}
+    ],
+    isShow: [
+        {required: true, message: '请选择是否显示', trigger: 'change'}
+    ]
+})
+
+const form = ref()
+
+/**
+ * 保存按钮点击事件
+ */
+const saveBtnClick = () => {
+    console.log(model)
+    form.value.validate((valid) => {
+        if (valid) {
+            if (!model.id) {
+                post('/custom/saveGroup', model).then(res => {
+                    if (res?.isOk) {
+                        ElMessage.success('保存成功')
+                        emits('close', true)
+                    } else {
+                        ElMessage.error(res?.msg || '保存失败')
+                    }
+                })
+            } else {
+                post('/custom/updateGroup', model).then(res => {
+                    if (res?.isOk) {
+                        ElMessage.success('保存成功')
+                        emits('close', true)
+                    } else {
+                        ElMessage.error(res?.msg || '保存失败')
+                    }
+                })
+            }
+        } else {
+            return false;
+        }
+    })
+}
+
+/**
+ * 取消按钮点击事件
+ */
+const cancelBtnClick = () => {
+    emits('close', false)
+}
+
+onMounted(() => {
+    if (props.payload?.id) {
+        model.id = props.payload.id
+        model.groupName = props.payload.groupName
+        model.sort = props.payload.sort
+        model.isShow = props.payload.isShow
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+@use "../../styles/dialog.scss";
+</style>