vue-wiring-diagram 1.1.22 → 1.1.23

package/packages/components/preview/index.vue

@@ -1,355 +1,399 @@
-/**
-* @Author: HuaYJ
-* @Date: 2024/12/10 10:01
-*/
-<template>
-    <div style="width: 100%; height: 100%;position: relative">
-        <div id="preview-container" ref="previewRef" @dblclick="zoomToFit"></div>
-        <div class="spinner" v-if="loading">
-            <div class="spinner1"></div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import {onMounted, onUnmounted, ref, shallowRef} from "vue";
-import {Graph} from "@antv/x6";
-import {getData, getRealData, showPorts} from "../common.js";
-import {ElMessage} from "element-plus";
-import {defaultMatch, defaultText, setPipeDirection} from "packages/components/tools.js";
-import {ARROWFORWARD, FLASHING} from "packages/components/enums.js";
-import {arrowBackward, arrowForward, backgroundOptions, gridOptions} from "packages/components/settings.js";
-
-defineOptions({
-    name: 'wiring-diagram-preview'
-})
-
-const props = defineProps({
-    id: {
-        type: String,
-        default: ''
-    },
-    background: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    },
-    grid: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    },
-    data: {
-        type: Object,
-        default: () => {
-            return {}
-        }
-    }
-})
-
-// 画布
-const graph = ref()
-
-/**
- * 初始化画布
- */
-const initGraph = () => {
-    window.__x6_instances__ = []
-    const container = document.getElementById('preview-container')
-    graph.value = new Graph({
-        container: container,
-        autoResize: true, // 画布自适应
-        panning: true, // 画布可拖动
-        mousewheel: true, // 画布可缩放
-        connecting: {
-            router: 'orth',
-            connectionPoint: {
-                name: 'anchor',
-            },
-            anchor: 'center',
-        },
-        interacting: {
-            nodeMovable: false,
-            magnetConnectable: false,
-            edgeMovable: false,
-            edgeLabelMovable: false,
-            arrowheadMovable: false,
-            vertexMovable: false,
-            vertexAddable: false,
-            vertexDeletable: false,
-        }
-    })
-    window.__x6_instances__.push(container)
-
-    /**
-     * 画布空白区域双击事件
-     */
-    graph.value.on('blank:dblclick', () => {
-        setFieldData()
-    })
-
-    graph.value.on('render:done', () => {
-        showPorts("#preview-container", false)
-        zoomToFit()
-    })
-}
-
-/**
- * 渲染数据
- */
-const renderData = async () => {
-    let background, grid, data;
-    if (props.id) {
-        const options = await getData(props.id)
-        background = options?.background || backgroundOptions;
-        grid = options?.grid || gridOptions;
-        data = options?.data || {cells: []};
-    } else {
-        background = props.background;
-        grid = {};
-        data = props.data;
-    }
-
-    graph.value.drawBackground(background);
-    graph.value.drawGrid(grid);
-    graph.value.fromJSON(data);
-    refreshData()
-}
-
-// 定时器
-const timer = ref(null)
-// 节点
-const cells = ref([])
-// 参数
-const allFields = ref([])
-// 标志位判断组件是否已销毁
-const isDestroyed = ref(false)
-// 加载中
-const loading = ref(false)
-
-/**
- * 刷新数据
- */
-const refreshData = () => {
-    cells.value = graph.value.getCells().filter(cell => cell?.data?.type === 'text' || cell?.data?.type === 'pipe' || cell?.data?.type === 'arrow')
-    cells.value.forEach(item => {
-        if (item?.data?.fields?.length) {
-            allFields.value.push({id: item?.id, fields: item?.data.fields})
-        }
-    })
-    setFieldData()
-}
-
-// 是否允许刷新数据
-const isAllowRefresh = ref(true)
-
-/**
- * 设置字段数据
- * @returns {Promise<void>}
- */
-const setFieldData = async () => {
-    loading.value = true
-    if (!allFields.value.length) {
-        loading.value = false
-        return
-    }
-
-    if (!isAllowRefresh.value) {
-        ElMessage.warning('数据正在更新中，请稍后再试')
-        return
-    }
-
-    if (timer.value) {
-        clearInterval(timer.value)
-    }
-
-    isAllowRefresh.value = false
-    console.log('字段数据', allFields.value)
-    await getDataBatch(allFields.value)
-
-    if (isDestroyed.value) {
-        return
-    }
-
-    timer.value = setTimeout(() => {
-        setFieldData()
-    }, 10000)
-}
-
-/**
- * 分批次获取数据 每批次获取最多 10 条数据
- * @param fields 字段数组
- * @param batch
- */
-const getDataBatch = async (fields, batch = 0) => {
-    let size = 5 // 每批次获取数量
-    if (isDestroyed.value) {
-        return
-    }
-    if (fields.length > batch * size) {
-        const batchData = fields.slice(batch * size, batch * size + size)
-        console.log('批次：', batch, '数据：', batchData)
-        batch++
-        setRealData(await getRealData(batchData))
-        await getDataBatch(fields, batch)
-    } else {
-        loading.value = false
-        isAllowRefresh.value = true
-    }
-}
-
-/**
- * 根据不同类型设置实时数据
- */
-const setRealData = (realData) => {
-    realData?.forEach(item => {
-        const cell = graph.value.getCellById(item.id)
-        if (cell.data.type === 'text') {
-            cell.label = replaceAllTemplateLiteralsWithArray(cell.data.content, item.fields)
-        }
-        if (cell.data.type === 'pipe') {
-            console.log('管道详情', cell, item.fields?.[0].value)
-            setPipe(cell, item.fields?.[0].value)
-        }
-
-        if (cell.data.type === 'arrow') {
-            setArrow(cell, item.fields?.[0].value)
-        }
-    })
-}
-
-/**
- * 替换模板字符串
- * @param str 模板字符串
- * @param fields 替换数组
- * @returns {*}
- */
-const replaceAllTemplateLiteralsWithArray = (str, fields) => {
-    let index = 0
-    return str.replace(defaultMatch, () => {
-        const field = fields.find(item => item.index === index)
-        index++
-        if (field) {
-            return field.value
-        } else {
-            return defaultText
-        }
-    })
-}
-
-/**
- * 设置管道
- * @param cell
- * @param value
- */
-const setPipe = (cell, value) => {
-    if (!cell.data.isCondition) {
-        return false
-    }
-    console.log('进入设置管道阶段start：', cell)
-    console.log('管道条件判断设置：', cell.data.condition)
-    for (let i = 0; i < cell.data.condition.length; i++) {
-        console.log('┌──────单个设置管道阶段start：───────┐')
-        console.log('条件：', cell.data.condition[i])
-        console.log('判断条件是否通过：', Number(value) > cell.data.condition[i].min && Number(value) <= cell.data.condition[i].max)
-        if (Number(value) > cell.data.condition[i].min && Number(value) <= cell.data.condition[i].max) {
-            console.log('管道条件判断设置的动画：', setPipeDirection(cell.data.condition[i].direction))
-            cell.attr('pipe/style/animation', setPipeDirection(cell.data.condition[i].direction))
-            console.log('设置过后的属性：', cell)
-            console.log('└────────单个条件结束判断────────┘')
-            return false
-        }
-        console.log('└─────────单个条件结束判断───────┘')
-    }
-}
-/**
- * 设置箭头
- * @param cell
- * @param value
- */
-const setArrow = (cell, value) => {
-    console.log(cell, value)
-    if (!cell.data.isCondition) {
-        return false
-    }
-    for (let i = 0; i < cell.data.condition.length; i++) {
-        if (Number(value) > cell.data.condition[i].min && Number(value) <= cell.data.condition[i].max) {
-            cell.attr('arrow/style/animation', cell.data.condition[i].animation === FLASHING ? 'flashing 2s infinite linear' : '')
-            cell.attr('arrow/d', cell.data.condition[i].direction === ARROWFORWARD ? arrowForward : arrowBackward)
-            cell.attr('arrow/display', cell.data.condition[i].display)
-            return false
-        }
-    }
-}
-
-/**
- * \@description 画布自适应
- */
-const zoomToFit = () => {
-    graph.value.zoomToFit({maxScale: 1.4, padding: 20})
-}
-
-const previewRef = shallowRef()
-
-/**
- * 监听浏览器窗口变化
- */
-const watchBrowser = () => {
-    const observer = new ResizeObserver(() => {
-        zoomToFit()
-    })
-    observer.observe(previewRef.value)
-}
-
-onMounted(() => {
-    isDestroyed.value = false
-    initGraph()
-    renderData()
-    watchBrowser()
-})
-
-
-onUnmounted(() => {
-    isDestroyed.value = true
-    clearInterval(timer.value)
-})
-</script>
-
-<style lang="scss">
-@use "../../styles/animation.scss";
-
-#preview-container {
-    position: relative;
-}
-
-.spinner {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
-    width: 20px;
-    height: 20px;
-    animation: spinning82341 1.7s linear infinite;
-    text-align: center;
-    border-radius: 50px;
-    filter: blur(1px);
-    box-shadow: 0px -5px 50px 0px rgb(186, 66, 255), 0px 5px 50px 0px rgb(0, 225, 255);
-}
-
-.spinner1 {
-    background-color: rgb(36, 36, 36);
-    width: 20px;
-    height: 20px;
-    border-radius: 50px;
-    filter: blur(4px);
-}
-
-@keyframes spinning82341 {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2024/12/10 10:01
+*/
+<template>
+    <div style="width: 100%; height: 100%;position: relative">
+        <div id="preview-container" ref="previewRef" @dblclick="zoomToFit"></div>
+        <div class="spinner" v-if="loading">
+            <div class="spinner1"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {onMounted, onUnmounted, ref, shallowRef} from "vue";
+import {Graph} from "@antv/x6";
+import {getData, getRealData, showPorts} from "../common.js";
+import {ElMessage} from "element-plus";
+import {defaultMatch, defaultText, setPipeDirection, setSunCloudImageUrl} from "packages/components/tools.js";
+import {ARROWFORWARD, FLASHING} from "packages/components/enums.js";
+import {arrowBackward, arrowForward, backgroundOptions, gridOptions} from "packages/components/settings.js";
+import {isSunOs} from "packages";
+
+defineOptions({
+    name: 'wiring-diagram-preview'
+})
+
+const props = defineProps({
+    id: {
+        type: String,
+        default: ''
+    },
+    background: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    grid: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    data: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+// 画布
+const graph = ref()
+
+/**
+ * 初始化画布
+ */
+const initGraph = () => {
+    window.__x6_instances__ = []
+    const container = document.getElementById('preview-container')
+    graph.value = new Graph({
+        container: container,
+        autoResize: true, // 画布自适应
+        panning: true, // 画布可拖动
+        mousewheel: true, // 画布可缩放
+        connecting: {
+            router: 'orth',
+            connectionPoint: {
+                name: 'anchor',
+            },
+            anchor: 'center',
+        },
+        interacting: {
+            nodeMovable: false,
+            magnetConnectable: false,
+            edgeMovable: false,
+            edgeLabelMovable: false,
+            arrowheadMovable: false,
+            vertexMovable: false,
+            vertexAddable: false,
+            vertexDeletable: false,
+        }
+    })
+    window.__x6_instances__.push(container)
+
+    /**
+     * 画布空白区域双击事件
+     */
+    graph.value.on('blank:dblclick', () => {
+        setFieldData()
+    })
+
+    graph.value.on('render:done', () => {
+        showPorts("#preview-container", false)
+        zoomToFit()
+    })
+}
+
+/**
+ * 渲染数据
+ */
+const renderData = async () => {
+    let background, grid, data;
+    if (props.id) {
+        const options = await getData(props.id)
+        background = options?.background || backgroundOptions;
+        grid = options?.grid || gridOptions;
+        data = options?.data || {cells: []};
+    } else {
+        background = props.background;
+        grid = {};
+        data = props.data;
+    }
+
+    graph.value.drawBackground(background);
+    graph.value.drawGrid(grid);
+    graph.value.fromJSON(data);
+    refreshData()
+}
+
+// 定时器
+const timer = ref(null)
+// 节点
+const cells = ref([])
+// 参数
+const allFields = ref([])
+// 标志位判断组件是否已销毁
+const isDestroyed = ref(false)
+// 加载中
+const loading = ref(false)
+
+/**
+ * 刷新数据
+ */
+const refreshData = () => {
+    cells.value = graph.value.getCells().filter(cell => cell?.data?.type === 'text' || cell?.data?.type === 'pipe' || cell?.data?.type === 'arrow' || cell?.data?.type == 'image' )
+    cells.value.forEach(item => {
+        if (item?.data?.fields?.length) {
+            allFields.value.push({id: item?.id, fields: item?.data.fields})
+        }
+    })
+    setFieldData()
+}
+
+// 是否允许刷新数据
+const isAllowRefresh = ref(true)
+
+/**
+ * 设置字段数据
+ * @returns {Promise<void>}
+ */
+const setFieldData = async () => {
+    loading.value = true
+    if (!allFields.value.length) {
+        loading.value = false
+        return
+    }
+
+    if (!isAllowRefresh.value) {
+        ElMessage.warning('数据正在更新中，请稍后再试')
+        return
+    }
+
+    if (timer.value) {
+        clearInterval(timer.value)
+    }
+
+    isAllowRefresh.value = false
+    console.log('字段数据', allFields.value)
+    await getDataBatch(allFields.value)
+
+    if (isDestroyed.value) {
+        return
+    }
+
+    timer.value = setTimeout(() => {
+        setFieldData()
+    }, 10000)
+}
+
+/**
+ * 分批次获取数据 每批次获取最多 10 条数据
+ * @param fields 字段数组
+ * @param batch
+ */
+const getDataBatch = async (fields, batch = 0) => {
+    let size = 5 // 每批次获取数量
+    if (isDestroyed.value) {
+        return
+    }
+    if (fields.length > batch * size) {
+        const batchData = fields.slice(batch * size, batch * size + size)
+        console.log('批次：', batch, '数据：', batchData)
+        batch++
+        setRealData(await getRealData(batchData))
+        await getDataBatch(fields, batch)
+    } else {
+        loading.value = false
+        isAllowRefresh.value = true
+    }
+}
+
+/**
+ * 根据不同类型设置实时数据
+ */
+const setRealData = (realData) => {
+    realData?.forEach(item => {
+        const cell = graph.value.getCellById(item.id)
+        if (cell.data.type === 'text') {
+            cell.label = replaceAllTemplateLiteralsWithArray(cell.data.content, item.fields)
+        }
+        if (cell.data.type === 'pipe') {
+            console.log('管道详情', cell, item.fields?.[0].value)
+            setPipe(cell, item.fields?.[0].value)
+        }
+
+        if (cell.data.type === 'arrow') {
+            setArrow(cell, item.fields?.[0].value)
+        }
+
+        if (cell.shape === 'image') {
+            console.log('图片详情', cell, item.fields)
+            setImage(cell, item.fields)
+        }
+    })
+}
+
+/**
+ * 替换模板字符串
+ * @param str 模板字符串
+ * @param fields 替换数组
+ * @returns {*}
+ */
+const replaceAllTemplateLiteralsWithArray = (str, fields) => {
+    let index = 0
+    return str.replace(defaultMatch, () => {
+        const field = fields.find(item => item.index === index)
+        index++
+        if (field) {
+            return field.value
+        } else {
+            return defaultText
+        }
+    })
+}
+
+/**
+ * 设置管道
+ * @param cell
+ * @param value
+ */
+const setPipe = (cell, value) => {
+    if (!cell.data.isCondition) {
+        return false
+    }
+    console.log('进入设置管道阶段start：', cell)
+    console.log('管道条件判断设置：', cell.data.condition)
+    for (let i = 0; i < cell.data.condition.length; i++) {
+        console.log('┌──────单个设置管道阶段start：───────┐')
+        console.log('条件：', cell.data.condition[i])
+        console.log('判断条件是否通过：', Number(value) > cell.data.condition[i].min && Number(value) <= cell.data.condition[i].max)
+        if (Number(value) > cell.data.condition[i].min && Number(value) <= cell.data.condition[i].max) {
+            console.log('管道条件判断设置的动画：', setPipeDirection(cell.data.condition[i].direction))
+            cell.attr('pipe/style/animation', setPipeDirection(cell.data.condition[i].direction))
+            console.log('设置过后的属性：', cell)
+            console.log('└────────单个条件结束判断────────┘')
+            return false
+        }
+        console.log('└─────────单个条件结束判断───────┘')
+    }
+}
+/**
+ * 设置箭头
+ * @param cell
+ * @param value
+ */
+const setArrow = (cell, value) => {
+    console.log(cell, value)
+    if (!cell.data.isCondition) {
+        return false
+    }
+    for (let i = 0; i < cell.data.condition.length; i++) {
+        if (Number(value) > cell.data.condition[i].min && Number(value) <= cell.data.condition[i].max) {
+            cell.attr('arrow/style/animation', cell.data.condition[i].animation === FLASHING ? 'flashing 2s infinite linear' : '')
+            cell.attr('arrow/d', cell.data.condition[i].direction === ARROWFORWARD ? arrowForward : arrowBackward)
+            cell.attr('arrow/display', cell.data.condition[i].display)
+            return false
+        }
+    }
+}
+
+/**
+ * 设置图片 - 支持条件控制更换元件
+ * @param cell 图片单元格
+ * @param fields 设备字段数据
+ */
+const setImage = (cell, fields) => {
+    if (!cell.data.isCondition) {
+        return false
+    }
+    console.log('进入设置图片阶段：', cell)
+    console.log('图片条件判断设置：', cell.data.condition)
+    console.log('设备字段数据：', fields)
+    
+    // 如果没有字段数据，直接返回
+    if (!fields || fields.length === 0) {
+        return false
+    }
+    
+    // 获取设备值（图片目前只支持单设备）
+    const field = fields[0]
+    const value = Number(field.value)
+    
+    // 根据条件判断更换图片
+    for (let i = 0; i < cell.data.condition.length; i++) {
+        const condition = cell.data.condition[i]
+        console.log(cell.data,'cell.data55555555');
+        if (value > condition.min && value <= condition.max) {
+            if (condition.imageUrl) {
+                console.log('更换图片为：', setSunCloudImageUrl(condition?.imageUrl))
+                cell.attr('image/xlink:href', isSunOs ? condition?.imageUrl : setSunCloudImageUrl(condition?.imageUrl))
+            }
+            return false
+        }
+    }
+    
+    console.log('未匹配到条件，保持原图片')
+}
+
+/**
+ * \@description 画布自适应
+ */
+const zoomToFit = () => {
+    graph.value.zoomToFit({maxScale: 1.4, padding: 20})
+}
+
+const previewRef = shallowRef()
+
+/**
+ * 监听浏览器窗口变化
+ */
+const watchBrowser = () => {
+    const observer = new ResizeObserver(() => {
+        zoomToFit()
+    })
+    observer.observe(previewRef.value)
+}
+
+onMounted(() => {
+    isDestroyed.value = false
+    initGraph()
+    renderData()
+    watchBrowser()
+})
+
+
+onUnmounted(() => {
+    isDestroyed.value = true
+    clearInterval(timer.value)
+})
+</script>
+
+<style lang="scss">
+@use "../../styles/animation.scss";
+
+#preview-container {
+    position: relative;
+}
+
+.spinner {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
+    width: 20px;
+    height: 20px;
+    animation: spinning82341 1.7s linear infinite;
+    text-align: center;
+    border-radius: 50px;
+    filter: blur(1px);
+    box-shadow: 0px -5px 50px 0px rgb(186, 66, 255), 0px 5px 50px 0px rgb(0, 225, 255);
+}
+
+.spinner1 {
+    background-color: rgb(36, 36, 36);
+    width: 20px;
+    height: 20px;
+    border-radius: 50px;
+    filter: blur(4px);
+}
+
+@keyframes spinning82341 {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+</style>