@ebiz/designer-components 0.0.46 → 0.0.48

package/src/components/EbizMindmap/index.vue

@@ -1,383 +1,383 @@
-<template>
-    <div class="doc-playground">
-
-        <MindmapLayout :option="options" :layoutoption="layoutoption"></MindmapLayout>
-    </div>
-
-
-</template>
-
-<script>
-import MindmapLayout from './components/vueNode.vue';
-import { Slider, Switch, Radio, Numeric, Select, Option, } from '@opentiny/vue'
-
-const options = {
-    theme: 'hdesign-light',
-    layout: {
-        type: 'mindmap',
-        direction: 'LR',
-        nodeShape: 'rect',
-        vGap: 10,
-        hGap: 100,
-        bufferRender: true
-    },
-    node: {
-        width: 200,
-        height: 100,
-    },
-    legend: {
-        render(parmas) {
-            const { name, dataIndex } = parmas
-            const colors = ['#E02128', '#2070F3', '#09AA71', '#F4840C']
-            const color = colors[dataIndex]
-            return `<div class="demo-legend-container">
-      <div class="demo-legend-icon">
-        <div class="demo-legend-state" style="background-color:${color}"></div>
-      </div>
-      <div class="demo-legend-label">${name}</div>
-    </div>`
-        },
-        data: [
-            {
-                name: '岗位',
-            },
-            {
-                name: '部门',
-            }
-        ]
-    },
-    line: {
-        type: 'Bezier',
-        style: {
-            active: {
-                color: 'red',
-                width: 2,
-            },
-            disable: {
-                color: 'blue'
-            }
-        }
-    },
-    canvas: {
-        show: true,
-        grid: {
-            size: 20,
-            show: true,
-            type: 'dot',
-            config: {
-                color: '#aaaaaa',
-                unitSize: 1,
-            }
-        }
-    },
-    connector: {
-        startSharing: 'merge',
-        endSharing: 'merge',
-        type: 'expand',
-        show: true
-    },
-    data: {
-        id: 'root',
-        text: '产品研发中心',
-        peopleNum: 100,
-        more: {
-            introduction: '部门介绍:产品研发',
-            address: '部门地址:xx',
-            iphone: '部门电话:xx',
-            email: '部门邮箱:xxx',
-            contact: '部门联系人:xx'
-        },
-        children: [
-            {
-                id: 'R&DDept1',
-                text: '研发部',
-                peopleNum: 20,
-                more: {
-                    introduction: '部门介绍:研发部',
-                    address: '部门地址:xx',
-                    iphone: '部门电话:xx',
-                    email: '部门邮箱:xxx',
-                    contact: '部门联系人:xx'
-                },
-                children: [
-                    {
-                        id: 'frontend1',
-                        text: '研发一部',
-                        peopleNum: 8,
-                        more: {
-                            introduction: '部门介绍:研发一部',
-                            address: '部门地址:xx',
-                            iphone: '部门电话:xx',
-                            email: '部门邮箱:xxx',
-                            contact: '部门联系人:xx'
-                        },
-                    },
-                    {
-                        id: 'backend1',
-                        text: '研发二部',
-                        peopleNum: 12,
-                        more: {
-                            introduction: '部门介绍:研发二部',
-                            address: '部门地址:xx',
-                            iphone: '部门电话:xx',
-                            email: '部门邮箱:xxx',
-                            contact: '部门联系人:xx'
-                        },
-                    },
-                    {
-                        id: 'backend11',
-                        text: '研发三部',
-                        peopleNum: 12,
-                        more: {
-                            introduction: '部门介绍:研发二部',
-                            address: '部门地址:xx',
-                            iphone: '部门电话:xx',
-                            email: '部门邮箱:xxx',
-                            contact: '部门联系人:xx'
-                        },
-                    }
-                ]
-            },
-            {
-                id: 'designDept2',
-                text: '设计部',
-                peopleNum: 60,
-                more: {
-                    introduction: '部门介绍:设计部',
-                    address: '部门地址:xx',
-                    iphone: '部门电话:xx',
-                    email: '部门邮箱:xxx',
-                    contact: '部门联系人:xx'
-                },
-                children: [
-                    {
-                        id: 'UI2',
-                        text: '设计一部',
-                        peopleNum: 20,
-                        more: {
-                            introduction: '部门介绍:设计一部',
-                            address: '部门地址:xx',
-                            iphone: '部门电话:xx',
-                            email: '部门邮箱:xxx',
-                            contact: '部门联系人:xx'
-                        },
-                    },
-                    {
-                        id: 'UX2',
-                        text: '设计二部',
-                        peopleNum: 40,
-                        more: {
-                            introduction: '部门介绍:设计二部',
-                            address: '部门地址:xx',
-                            iphone: '部门电话:xx',
-                            email: '部门邮箱:xxx',
-                            contact: '部门联系人:xx'
-                        },
-                    },
-                    {
-                        id: 'UX22',
-                        text: '设计三部',
-                        peopleNum: 40,
-                        more: {
-                            introduction: '部门介绍:设计二部',
-                            address: '部门地址:xx',
-                            iphone: '部门电话:xx',
-                            email: '部门邮箱:xxx',
-                            contact: '部门联系人:xx'
-                        },
-                    },
-                    {
-                        id: 'UX222',
-                        text: '设计四部',
-                        peopleNum: 40,
-                        more: {
-                            introduction: '部门介绍:设计二部',
-                            address: '部门地址:xx',
-                            iphone: '部门电话:xx',
-                            email: '部门邮箱:xxx',
-                            contact: '部门联系人:xx'
-                        },
-                    },
-                ]
-            },
-            {
-                id: 'productDept3',
-                text: '产品部',
-                peopleNum: 20,
-                more: {
-                    introduction: '部门介绍:产品部',
-                    address: '部门地址:xx',
-                    iphone: '部门电话:xx',
-                    email: '部门邮箱:xxx',
-                    contact: '部门联系人:xx'
-                },
-                children: [
-                    {
-                        id: 'productManager3',
-                        text: '产品一部',
-                        peopleNum: 11,
-                        more: {
-                            introduction: '部门介绍:产品一部',
-                            address: '部门地址:xx',
-                            iphone: '部门电话:xx',
-                            email: '部门邮箱:xxx',
-                            contact: '部门联系人:xx'
-                        },
-                    },
-                    {
-                        id: 'productOperation3',
-                        text: '产品二部',
-                        peopleNum: 9,
-                        more: {
-                            introduction: '部门介绍:产品二部',
-                            address: '部门地址:xx',
-                            iphone: '部门电话:xx',
-                            email: '部门邮箱:xxx',
-                            contact: '部门联系人:xx'
-                        },
-                    }
-                ]
-            }
-        ]
-    },
-    menu: {
-        node: {
-            data: [
-                { icon: './image/charts/contextmenu/delete.svg', label: '删除节点', value: 'delete' },
-                { icon: './image/charts/contextmenu/copy.svg', label: '复制节点', value: 'copy' },
-                { icon: './image/charts/contextmenu/merge.svg', label: '合并节点', value: 'merge' },
-                { icon: './image/charts/contextmenu/setting.svg', label: '数据配置', value: 'setting' },
-                { icon: './image/charts/contextmenu/add.svg', label: '新增子节点', value: 'add' },
-            ],
-            onclick: (itemData, targetId, e) => {
-                // console.log('node--------', itemData, targetId, e)
-            }
-        },
-        canvas: {
-            data: [
-                { icon: './image/charts/contextmenu/broom.svg', label: '清除', value: 'clear' },
-                { icon: './image/charts/contextmenu/resetting.svg', label: '重置', value: 'reset' },
-            ],
-            onclick: (itemData, el) => {
-                // console.log('canvas------', itemData, el)
-            }
-        },
-        line: {
-            data: [
-                { icon: './image/charts/contextmenu/paint.svg', label: '线条', value: 'line' },
-            ],
-            itemRender: (itemData, targetId) => {
-                return `<div style="display: flex; align-item: center;">
-        <img style="width: 20px; height: 20px; margin-right: 6px;" src=${itemData.icon} alt="" />
-        <p>${itemData.label}高亮</p>
-        <div>`
-            },
-            onclick: (itemData, targetId, e) => {
-                // console.log('line--------', itemData, targetId)
-            }
-        },
-        legend: {
-            data: [
-                { label: '高亮', value: 'highlight' },
-            ],
-            onclick: (itemData, targetId, e) => {
-                // console.log('legend--------', itemData, targetId)
-            }
-        }
-    }
-};
-
-export default {
-    name: 'Card',
-    components: {
-        MindmapLayout,
-        TinySlider: Slider,
-        TinySwitch: Switch,
-        TinyRadio: Radio,
-        TinyNumeric: Numeric,
-        TinySelect: Select,
-        TinyOption: Option,
-    },
-    data() {
-        return {
-            chartCode: [],
-            options: options,
-            chartData: ['CardChart'],
-            activeName: 'DEMO',
-            theme: localStorage.getItem('chartTheme') || 'hdesign-light',
-            directionTypes: [{
-                value: 'LR',
-                label: 'LR--由左到右布局'
-            }, {
-                value: 'RL',
-                label: 'RL--由右到左布局'
-            }, {
-                value: 'TB',
-                label: 'TB--由上到下布局'
-            }, {
-                value: 'BT',
-                label: 'BT--由下到上布局'
-            }, {
-                value: 'H',
-                label: 'H--左右布局'
-            }, {
-                value: 'V',
-                label: 'V--上下布局'
-            }],
-            layoutoption: {
-                direction: 'LR',
-                vGap: 40,
-                hGap: 100,
-                oneSide: ['designDept'],
-                oneSideString: 'designDept'
-            },
-            backGroundColor: ''
-        }
-
-    },
-    watch: {
-
-    },
-    mounted() {
-        this.chartData.forEach((item, index) => {
-            this.axios.get(`quick_start/${item}.md`).then(res => {
-                this.chartCode[index] = res.data.replaceAll("{{VITE_BASECOPYRIGHTSPAT}}", import.meta.env.VITE_BASECOPYRIGHTSPAT);
-            })
-        })
-        this.setTheme(this.theme?.indexOf('light') > -1);
-        this.$bus.on('themeChange', (val) => {
-            this.setTheme(val.indexOf('light') > -1)
-        })
-
-        this.backGroundColor = this.theme.toLowerCase().includes('light') ? '#ffffff' : '#191919';
-
-
-    },
-    watch: {
-        theme: function (newVal) {
-            this.setTheme(newVal.indexOf('light') > -1)
-        },
-
-    },
-    methods: {
-
-        setTheme(val) {
-            this.tabsBtnACtiveBg = val ? '#ffffff' : '#1c1c1c';
-            this.tabsBtnACtiveColor = val ? '#000' : '#f1f0f0';
-            this.tabsBtnBg = val ? '#f2f2f2' : '#414141';
-            this.tabsBtnColor = val ? '#777777' : '#c9c3c5';
-        },
-    }
-}
-</script>
-<style lang="less" scoped>
-.chart-container {
-    border: 1px solid var(--ti-base-color-common-1);
-}
-
-.doc-playground .doc-split-pane .doc-editor .control-item.normal {
-    .radio {
-        display: flex;
-    }
-}
+<template>
+    <div class="doc-playground">
+
+        <MindmapLayout :option="options" :layoutoption="layoutoption"></MindmapLayout>
+    </div>
+
+
+</template>
+
+<script>
+import MindmapLayout from './components/vueNode.vue';
+import { Slider, Switch, Radio, Numeric, Select, Option, } from '@opentiny/vue'
+
+const options = {
+    theme: 'hdesign-light',
+    layout: {
+        type: 'mindmap',
+        direction: 'LR',
+        nodeShape: 'rect',
+        vGap: 10,
+        hGap: 100,
+        bufferRender: true
+    },
+    node: {
+        width: 200,
+        height: 100,
+    },
+    legend: {
+        render(parmas) {
+            const { name, dataIndex } = parmas
+            const colors = ['#E02128', '#2070F3', '#09AA71', '#F4840C']
+            const color = colors[dataIndex]
+            return `<div class="demo-legend-container">
+      <div class="demo-legend-icon">
+        <div class="demo-legend-state" style="background-color:${color}"></div>
+      </div>
+      <div class="demo-legend-label">${name}</div>
+    </div>`
+        },
+        data: [
+            {
+                name: '岗位',
+            },
+            {
+                name: '部门',
+            }
+        ]
+    },
+    line: {
+        type: 'Bezier',
+        style: {
+            active: {
+                color: 'red',
+                width: 2,
+            },
+            disable: {
+                color: 'blue'
+            }
+        }
+    },
+    canvas: {
+        show: true,
+        grid: {
+            size: 20,
+            show: true,
+            type: 'dot',
+            config: {
+                color: '#aaaaaa',
+                unitSize: 1,
+            }
+        }
+    },
+    connector: {
+        startSharing: 'merge',
+        endSharing: 'merge',
+        type: 'expand',
+        show: true
+    },
+    data: {
+        id: 'root',
+        text: '产品研发中心',
+        peopleNum: 100,
+        more: {
+            introduction: '部门介绍:产品研发',
+            address: '部门地址:xx',
+            iphone: '部门电话:xx',
+            email: '部门邮箱:xxx',
+            contact: '部门联系人:xx'
+        },
+        children: [
+            {
+                id: 'R&DDept1',
+                text: '研发部',
+                peopleNum: 20,
+                more: {
+                    introduction: '部门介绍:研发部',
+                    address: '部门地址:xx',
+                    iphone: '部门电话:xx',
+                    email: '部门邮箱:xxx',
+                    contact: '部门联系人:xx'
+                },
+                children: [
+                    {
+                        id: 'frontend1',
+                        text: '研发一部',
+                        peopleNum: 8,
+                        more: {
+                            introduction: '部门介绍:研发一部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'backend1',
+                        text: '研发二部',
+                        peopleNum: 12,
+                        more: {
+                            introduction: '部门介绍:研发二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'backend11',
+                        text: '研发三部',
+                        peopleNum: 12,
+                        more: {
+                            introduction: '部门介绍:研发二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    }
+                ]
+            },
+            {
+                id: 'designDept2',
+                text: '设计部',
+                peopleNum: 60,
+                more: {
+                    introduction: '部门介绍:设计部',
+                    address: '部门地址:xx',
+                    iphone: '部门电话:xx',
+                    email: '部门邮箱:xxx',
+                    contact: '部门联系人:xx'
+                },
+                children: [
+                    {
+                        id: 'UI2',
+                        text: '设计一部',
+                        peopleNum: 20,
+                        more: {
+                            introduction: '部门介绍:设计一部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'UX2',
+                        text: '设计二部',
+                        peopleNum: 40,
+                        more: {
+                            introduction: '部门介绍:设计二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'UX22',
+                        text: '设计三部',
+                        peopleNum: 40,
+                        more: {
+                            introduction: '部门介绍:设计二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'UX222',
+                        text: '设计四部',
+                        peopleNum: 40,
+                        more: {
+                            introduction: '部门介绍:设计二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                ]
+            },
+            {
+                id: 'productDept3',
+                text: '产品部',
+                peopleNum: 20,
+                more: {
+                    introduction: '部门介绍:产品部',
+                    address: '部门地址:xx',
+                    iphone: '部门电话:xx',
+                    email: '部门邮箱:xxx',
+                    contact: '部门联系人:xx'
+                },
+                children: [
+                    {
+                        id: 'productManager3',
+                        text: '产品一部',
+                        peopleNum: 11,
+                        more: {
+                            introduction: '部门介绍:产品一部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    },
+                    {
+                        id: 'productOperation3',
+                        text: '产品二部',
+                        peopleNum: 9,
+                        more: {
+                            introduction: '部门介绍:产品二部',
+                            address: '部门地址:xx',
+                            iphone: '部门电话:xx',
+                            email: '部门邮箱:xxx',
+                            contact: '部门联系人:xx'
+                        },
+                    }
+                ]
+            }
+        ]
+    },
+    menu: {
+        node: {
+            data: [
+                { icon: './image/charts/contextmenu/delete.svg', label: '删除节点', value: 'delete' },
+                { icon: './image/charts/contextmenu/copy.svg', label: '复制节点', value: 'copy' },
+                { icon: './image/charts/contextmenu/merge.svg', label: '合并节点', value: 'merge' },
+                { icon: './image/charts/contextmenu/setting.svg', label: '数据配置', value: 'setting' },
+                { icon: './image/charts/contextmenu/add.svg', label: '新增子节点', value: 'add' },
+            ],
+            onclick: (itemData, targetId, e) => {
+                // console.log('node--------', itemData, targetId, e)
+            }
+        },
+        canvas: {
+            data: [
+                { icon: './image/charts/contextmenu/broom.svg', label: '清除', value: 'clear' },
+                { icon: './image/charts/contextmenu/resetting.svg', label: '重置', value: 'reset' },
+            ],
+            onclick: (itemData, el) => {
+                // console.log('canvas------', itemData, el)
+            }
+        },
+        line: {
+            data: [
+                { icon: './image/charts/contextmenu/paint.svg', label: '线条', value: 'line' },
+            ],
+            itemRender: (itemData, targetId) => {
+                return `<div style="display: flex; align-item: center;">
+        <img style="width: 20px; height: 20px; margin-right: 6px;" src=${itemData.icon} alt="" />
+        <p>${itemData.label}高亮</p>
+        <div>`
+            },
+            onclick: (itemData, targetId, e) => {
+                // console.log('line--------', itemData, targetId)
+            }
+        },
+        legend: {
+            data: [
+                { label: '高亮', value: 'highlight' },
+            ],
+            onclick: (itemData, targetId, e) => {
+                // console.log('legend--------', itemData, targetId)
+            }
+        }
+    }
+};
+
+export default {
+    name: 'Card',
+    components: {
+        MindmapLayout,
+        TinySlider: Slider,
+        TinySwitch: Switch,
+        TinyRadio: Radio,
+        TinyNumeric: Numeric,
+        TinySelect: Select,
+        TinyOption: Option,
+    },
+    data() {
+        return {
+            chartCode: [],
+            options: options,
+            chartData: ['CardChart'],
+            activeName: 'DEMO',
+            theme: localStorage.getItem('chartTheme') || 'hdesign-light',
+            directionTypes: [{
+                value: 'LR',
+                label: 'LR--由左到右布局'
+            }, {
+                value: 'RL',
+                label: 'RL--由右到左布局'
+            }, {
+                value: 'TB',
+                label: 'TB--由上到下布局'
+            }, {
+                value: 'BT',
+                label: 'BT--由下到上布局'
+            }, {
+                value: 'H',
+                label: 'H--左右布局'
+            }, {
+                value: 'V',
+                label: 'V--上下布局'
+            }],
+            layoutoption: {
+                direction: 'LR',
+                vGap: 40,
+                hGap: 100,
+                oneSide: ['designDept'],
+                oneSideString: 'designDept'
+            },
+            backGroundColor: ''
+        }
+
+    },
+    watch: {
+
+    },
+    mounted() {
+        this.chartData.forEach((item, index) => {
+            this.axios.get(`quick_start/${item}.md`).then(res => {
+                this.chartCode[index] = res.data.replaceAll("{{VITE_BASECOPYRIGHTSPAT}}", import.meta.env.VITE_BASECOPYRIGHTSPAT);
+            })
+        })
+        this.setTheme(this.theme?.indexOf('light') > -1);
+        this.$bus.on('themeChange', (val) => {
+            this.setTheme(val.indexOf('light') > -1)
+        })
+
+        this.backGroundColor = this.theme.toLowerCase().includes('light') ? '#ffffff' : '#191919';
+
+
+    },
+    watch: {
+        theme: function (newVal) {
+            this.setTheme(newVal.indexOf('light') > -1)
+        },
+
+    },
+    methods: {
+
+        setTheme(val) {
+            this.tabsBtnACtiveBg = val ? '#ffffff' : '#1c1c1c';
+            this.tabsBtnACtiveColor = val ? '#000' : '#f1f0f0';
+            this.tabsBtnBg = val ? '#f2f2f2' : '#414141';
+            this.tabsBtnColor = val ? '#777777' : '#c9c3c5';
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+.chart-container {
+    border: 1px solid var(--ti-base-color-common-1);
+}
+
+.doc-playground .doc-split-pane .doc-editor .control-item.normal {
+    .radio {
+        display: flex;
+    }
+}
 </style>