@ebiz/designer-components 0.0.47 → 0.0.49

package/src/components/EbizMindmap/components/GridNode.vue

@@ -1,102 +0,0 @@
-<template>
-	<tiny-tooltip pre :content="tipContent" placement="bottom" effect="light">
-		<div class="grid-card" :style="style">
-			<img draggable="false" v-if="iconPath" :src="iconPath" />
-			<div class="text" :style="`bottom:${data.height / 2 }px`"> {{ data.text }}</div>
-		</div>
-	</tiny-tooltip>
-</template>
-
-<script  >
-import { Tooltip } from '@opentiny/vue'
-export default {
-	components: {
-		TinyTooltip:  Tooltip
-	},
-	props: {
-		data: Object,
-	},
-	data() {
-		let styleObject = {};
-		let data = this.data;
-		let iconPath;
-		let tipContent = [];
-		let icons = {
-			main: './image/charts/layout/servers_main.svg',
-			portal: './image/charts/layout/servers_portal.svg',
-			bms: './image/charts/layout/servers_bms.svg',
-			ecs: './image/charts/layout/servers_ecs.svg',
-			hecs: './image/charts/layout/servers_hecs.svg'
-		}
-		if(data.width) {
-			styleObject.width = data.width + 'px';
-		}
-		if(data.height) {
-			styleObject.height = data.height + 'px';
-		}
-		if(data.fill) {
-			styleObject.background = data.fill;
-		}
-		iconPath = icons[data.name];
-		if(data.name){
-			tipContent.push(`服务器名称：${data.name}`)
-		}
-		if(data.ip){
-			tipContent.push(`IP地址： ${data.ip}`)
-		}
-		if (data.iconPath) {
-			iconPath = data.iconPath;
-		}
-		return {
-        	style: styleObject,
-			iconPath: iconPath,
-			tipContent: tipContent.join('\n')
-    	}
-	},
-	mounted() {
-
-	},
-	computed: {
-
-	},
-
-	methods: {
-
-	}
-}
-</script>
-
-
-<style scoped>
-.grid-card {
-	width: 100%;
-	height: 100%;
-	border-radius: 50%;
-	border: 1px solid #6599ff;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: #fff;
-	position: relative;
-	
-}
-
-.text {
-	position: absolute;
-	transform: translateY(100%);
-	width: calc(100% + 30px);
-	text-align: center;
-	font-size: 12px;
-	display: -webkit-box;
-	-webkit-line-clamp: 3;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	margin-bottom: -18px;
-    color: var(--ti-base-color-common-7);
-}
-img{
-}
-img + .text{
-  margin-bottom: -35px;
-}
-</style>

package/src/components/EbizMindmap/components/node.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="mindmap-card">
-    <div class="mindmap-top" :style="{ backgroundColor: dynamicBackgroundColor }">
-      <p>{{ data.text }}</p>
-    </div>
-    <div class="mindmap-con">
-      <h4>部门人数: {{ data.peopleNum }}人</h4>
-      <!-- <div class="mindmap-progress-container">
-        <tiny-progress class="progress" :stroke-width="8" :percentage="data.peopleNum"
-          :format="formatText"></tiny-progress>
-      </div> -->
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { Progress as TinyProgress } from '@opentiny/vue';
-
-const props = defineProps({
-  data: {
-    type: Object,
-    required: true
-  }
-});
-
-const dynamicBackgroundColor = computed(() => {
-  if (props.data.id.includes('root')) {
-    return '#2070F3';
-  } else if (props.data.id.includes('researchDept')) {
-    return '#F4840C';
-  } else if (props.data.id.includes('designDept')) {
-    return '#09AA71';
-  }
-  return '#E02128'; // 默认背景颜色
-});
-
-const formatText = () => {
-  return `${props.data.peopleNum}/100`;
-};
-</script>
-
-<style>
-.mindmap-card {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  overflow: hidden;
-  font-family: Arial, sans-serif;
-  padding-left: 4px;
-  padding-right: 8px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-}
-
-.mindmap-top {
-  height: 30%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 1px solid #cccccc;
-  margin-left: -16px;
-  margin-right: -16px;
-  color: white;
-}
-
-.mindmap-con {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0 10px;
-  margin-top: 10px;
-  box-sizing: border-box;
-  font-size: 12px;
-}
-
-.tiny-progress__text {
-  font-size: 12px !important;
-  width: 20%
-}
-
-.mindmap-progress-container {
-  width: 100%;
-  margin-top: 4px;
-  margin-bottom: 6px;
-}
-
-.tiny-progress tiny-progress--line progress {
-  width: 80%
-}
-</style>

package/src/components/EbizMindmap/components/vueNode.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="chart-container">
-    <div class='chart drag-manager-wrap' ref="chartRef">
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch } from 'vue';
-import MindmapChart from '../../charts/framework/charts/MindmapChart';
-import Demo from './node.vue';
-
-const props = defineProps({
-  option: {
-    type: Object,
-    required: true
-  },
-  layoutoption: {
-    type: Object,
-    required: true
-  }
-});
-
-const chartRef = ref(null);
-const integrateChart = ref(null);
-const newoption = ref({});
-const currentTheme = ref(localStorage.getItem('chartTheme') || 'hdesign-light');
-
-const renderChart = () => {
-  integrateChart.value = new MindmapChart();
-  integrateChart.value.init(chartRef.value);
-  newoption.value = JSON.parse(JSON.stringify(props.option));
-  newoption.value.component = Demo;
-  integrateChart.value.setOption(newoption.value);
-  integrateChart.value.canvas.onScale = (args) => { };
-  integrateChart.value.render();
-};
-
-onMounted(() => {
-  renderChart();
-});
-
-watch(() => props.layoutoption, (newValue) => {
-  chartRef.value.innerHTML = '';
-  newoption.value.layout.direction = newValue.direction;
-  newoption.value.layout.vGap = newValue.vGap;
-  newoption.value.layout.hGap = newValue.hGap;
-  newoption.value.layout.oneSide = [];
-  newoption.value.layout.oneSide.push(newValue.oneSideString);
-
-  integrateChart.value.init(chartRef.value);
-  integrateChart.value.setOption(newoption.value);
-  integrateChart.value.canvas.onScale = (args) => { };
-  integrateChart.value.render();
-}, { deep: true });
-</script>
-
-<style scoped>
-.drag-manager-wrap {
-  width: 100% !important;
-  height: 600px;
-  overflow: hidden;
-}
-</style>

package/src/components/EbizMindmap/index.vue

@@ -1,383 +0,0 @@
-<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>

package/src/components/charts/chart.js

@@ -1,47 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import core from './core';
-import Register from './register';
-import { isFunction } from './util/type';
-
-// 图表核心对象，通过 Register 全量引入图表给 HuiCharts 渲染，打包容量较大
-export default class HuiCharts extends core {
-  constructor() {
-    super();
-    // 图表名称
-    this.chartName = null;
-  }
-
-  /**
-   * 传入配置项
-   * @param {图表类型, 当为string型时需要转换为对应图表class} chart 
-   * @param {配置项} iChartOption 
-   * @param {三方插件} plugins 
-   * @param {是否初始渲染} isInit 
-   */
-  setSimpleOption(chart, iChartOption, plugins = {}, isInit = true) {
-    let ChartClass = null; 
-    if(isFunction(chart)){
-      this.chartName = chart.name;
-      ChartClass = chart;
-    } else {
-      this.chartName = chart;
-      ChartClass = this.getChartClass(chart);
-    }
-    super.setSimpleOption(ChartClass, iChartOption, plugins, isInit);
-  }
-
-  // 获取图表类
-  getChartClass(name) {
-    return Register.getRegisteredComp(name);
-  }
-}