@zhangqingcq/vgce 0.0.14 → 0.0.16

package/src/config/files/now-time.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+	import { computed, onMounted, ref, onUnmounted } from 'vue'
+	const props = defineProps({
+		fontColor: {
+			type: String,
+			default: '#000000'
+		}
+	})
+	const now_date = ref(new Date())
+	const timer = ref()
+	const date = computed(() => {
+		const year = now_date.value.getFullYear()
+		const month = now_date.value.getMonth() + 1
+		const day = now_date.value.getDate()
+		const time = year.toString() + '年' + month.toString() + '月' + day.toString() + '日'
+		return time
+	})
+	const week = computed(() => {
+		const d = now_date.value.getDay()
+		const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+		const time = weekday[d]
+		return time
+	})
+	const time = computed(() => {
+		const hour = now_date.value.getHours()
+		const minute = now_date.value.getMinutes()
+		const second = now_date.value.getSeconds()
+		const time =
+			(hour < 10 ? '0' + hour.toString() : hour.toString()) +
+			':' +
+			(minute < 10 ? '0' + minute.toString() : minute.toString()) +
+			':' +
+			(second < 10 ? '0' + second.toString() : second.toString())
+		return time
+	})
+	onMounted(() => {
+		timer.value = setInterval(() => {
+			now_date.value = new Date() // 修改数据date
+		}, 500)
+	})
+	onUnmounted(() => {
+		clearInterval(timer.value)
+	})
+</script>
+<template>
+	<div>
+		<div class="text-12px font-bold" :style="{ color: props.fontColor }">{{ date }}</div>
+		<div class="flex mt-5px">
+			<div class="text-12px font-bold" :style="{ color: props.fontColor }">{{ week }}</div>
+			<div class="text-12px font-bold ml-5px" :style="{ color: props.fontColor }">{{ time }}</div>
+		</div>
+	</div>
+</template>

package/src/config/files/pie-charts.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+	import { use } from 'echarts/core'
+	import { SVGRenderer } from 'echarts/renderers'
+	import { PieChart } from 'echarts/charts'
+	import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+	import VChart, { THEME_KEY } from 'vue-echarts'
+	import { watch, provide, reactive } from 'vue'
+	use([SVGRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])
+
+	provide(THEME_KEY, 'dark')
+
+	const props = defineProps({
+		title: {
+			type: String,
+			default: '标题'
+		},
+		seriesName: {
+			type: String,
+			default: '详情'
+		},
+		seriesData: {
+			type: Array,
+			default: () => []
+		}
+	})
+
+	const option = reactive({
+		title: {
+			text: props.title,
+			left: 'center'
+		},
+		tooltip: {
+			trigger: 'item',
+			formatter: '{a} <br/>{b} : {c} ({d}%)'
+		},
+		legend: {
+			orient: 'vertical',
+			left: 'left'
+		},
+		series: [
+			{
+				name: props.seriesName,
+				type: 'pie',
+				radius: '55%',
+				center: ['50%', '60%'],
+				data: props.seriesData,
+				emphasis: {
+					itemStyle: {
+						shadowBlur: 10,
+						shadowOffsetX: 0,
+						shadowColor: 'rgba(0, 0, 0, 0.5)'
+					}
+				}
+			}
+		]
+	})
+	watch(props, (new_val) => {
+		option.title.text = new_val.title
+		option.series[0].name = new_val.seriesName
+		option.series[0].data = new_val.seriesData
+	})
+</script>
+
+<template>
+	<v-chart class="chart" :option="option" autoresize />
+</template>
+
+<style scoped>
+	.chart {
+		height: 400px;
+	}
+</style>

package/src/config/files/progress.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+	import { ElProgress } from 'element-plus'
+	import type { ProgressColor } from 'element-plus'
+	import { watch } from 'vue'
+
+	const colors: ProgressColor[] = [
+		{
+			color: '#f56c6c',
+			percentage: 20
+		},
+		{
+			color: '#e6a23c',
+			percentage: 40
+		},
+		{
+			color: '#5cb87a',
+			percentage: 60
+		},
+		{
+			color: '#1989fa',
+			percentage: 80
+		},
+		{
+			color: '#6f7ad3',
+			percentage: 100
+		}
+	]
+	const props = withDefaults(defineProps<{ percentage: number | string }>(), { percentage: 10 })
+	const emit = defineEmits(['onChange'])
+	watch(
+		() => props.percentage,
+		() => {
+			emit('onChange')
+		}
+	)
+</script>
+
+<template>
+	<el-progress type="dashboard" :percentage="Number(props.percentage)" :color="colors" />
+</template>

package/src/config/files/svg-text.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+	// 文字的内容决定了长度 所以没办法预先定义中心点 导致连线有偏移
+	import { nextTick, watch } from 'vue'
+
+	const emit = defineEmits(['resize'])
+
+	const props = defineProps({
+		fontFamily: {
+			type: String,
+			default: ''
+		},
+		fontSize: {
+			type: Number,
+			default: 15
+		},
+		text: {
+			type: String,
+			default: ''
+		},
+		fill: {
+			type: String,
+			default: ''
+		}
+	})
+
+	watch(
+		() => [props.text, props.fontSize, props.fontFamily],
+		() => {
+			nextTick(function () {
+				emit('resize')
+			})
+		}
+	)
+</script>
+<template>
+	<text x="50" y="55" :font-family="props.fontFamily" :font-size="props.fontSize" :fill="props.fill"
+		>{{ props.text }}
+	</text>
+</template>

package/src/config/files/switch-a.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+	import { watch } from 'vue'
+
+	const props = defineProps({
+		id: {
+			type: String,
+			default: ''
+		},
+		isOpen: {
+			type: Boolean,
+			default: true
+		}
+	})
+	const emit = defineEmits(['onChange'])
+	watch(
+		() => props.isOpen,
+		() => {
+			emit('onChange')
+		}
+	)
+</script>
+<template>
+	<g :id="props.id">
+		<symbol viewBox="0 0 1024 1024" :id="`${props.id}switch-demo-open`">
+			<path
+				d="M735.2 792.4H287.6C136.9 792.4 14.2 669.8 14.2 519c0-150.9 122.6-273.5 273.4-273.5h447.6c150.7 0 273.4 122.6 273.4 273.4 0 150.9-122.7 273.5-273.4 273.5zM287.6 300.2c-120.6 0-218.7 98.1-218.7 218.7 0 120.8 98.1 218.9 218.7 218.9h447.6c120.6 0 218.7-98.1 218.7-218.7 0-120.8-98.1-218.9-218.7-218.9H287.6z"
+				fill="#666666"
+			></path>
+			<path
+				d="M724.7 687.1c-92.7 0-168.1-75.4-168.1-168.1S632 350.9 724.7 350.9 892.8 426.3 892.8 519s-75.4 168.1-168.1 168.1z m0-278.6c-60.9 0-110.5 49.6-110.5 110.5s49.5 110.5 110.5 110.5S835.1 579.9 835.1 519s-49.5-110.5-110.4-110.5z"
+				fill="#666666"
+			></path>
+		</symbol>
+		<symbol viewBox="0 0 1024 1024" :id="`${props.id}switch-demo-close`">
+			<path
+				d="M704 224H320C161.216 224 32 353.216 32 512c0 158.816 129.216 288 288 288h384c158.816 0 288-129.184 288-288 0-158.784-129.184-288-288-288z m0 512H320C196.48 736 96 635.488 96 512c0-123.52 100.48-224 224-224h384c123.488 0 224 100.48 224 224 0 123.488-100.512 224-224 224z"
+			></path>
+			<path
+				d="M320 320c-105.888 0-192 86.112-192 192s86.112 192 192 192 192-86.112 192-192-86.112-192-192-192z m0 320c-70.592 0-128-57.408-128-128s57.408-128 128-128 128 57.408 128 128-57.408 128-128 128z"
+			></path>
+		</symbol>
+		<use v-if="props.isOpen" :xlink:href="`#${props.id}switch-demo-open`" width="100" height="100" />
+		<use v-else :xlink:href="`#${props.id}switch-demo-close`" width="100" height="100" />
+	</g>
+</template>

package/src/config/index.ts

@@ -0,0 +1,28 @@
+import type { IConfig } from './types'
+import { svg_config } from './svg'
+import { vue_config } from './vue'
+
+import { ElButton, ElTag } from 'element-plus'
+import Progress from '@/config/files/progress.vue'
+import SwitchA from '@/config/files/switch-a.vue'
+import SvgText from '@/config/files/svg-text.vue'
+import CommonTable from '@/config/files/common-table.vue'
+import NowTime from '@/config/files/now-time.vue'
+import PieCharts from '@/config/files/pie-charts.vue'
+import LightA from '@/config/files/light-a.vue'
+import ClockA from '@/config/files/clock-a.vue'
+
+export const vueComp: Record<string, any> = {
+	'svg-text': SvgText,
+	'el-button': ElButton,
+	'progress-a': Progress,
+	'el-tag': ElTag,
+	'common-table': CommonTable,
+	'pie-charts': PieCharts,
+	'switch-a': SwitchA,
+	'now-time': NowTime,
+	'light-a': LightA,
+	'clock-a': ClockA
+}
+
+export const config: IConfig = [...svg_config, ...vue_config]

package/src/config/svg/animation/index.ts

@@ -0,0 +1,8 @@
+import type { IConfigComponentGroup } from '../../types'
+import { reservoir } from './reservoir'
+
+export const animation_group: IConfigComponentGroup = {
+	groupType: 'have_animation',
+	title: '动画图标',
+	list: [reservoir]
+}

package/src/config/svg/animation/reservoir.ts

@@ -0,0 +1,32 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+export const reservoir: IConfigItem = {
+	name: 'reservoir',
+	title: '蓄水池',
+	type: EDoneJsonType.File,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		fill: {
+			title: '水流颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#37cfe7'
+		},
+		stroke: {
+			title: '边框颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#000'
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/svg/custom/clock-a.ts

@@ -0,0 +1,23 @@
+import { EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const clock_a: IConfigItem = {
+	name: 'clock-a',
+	title: '时钟',
+	tag: 'clock-a',
+	type: EDoneJsonType.CustomSvg,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/svg/custom/index.ts

@@ -0,0 +1,11 @@
+import type { IConfigComponentGroup } from '../../types'
+import { svg_text } from './svg-text'
+import { switch_a } from './switch-a'
+import { light_a } from '@/config/svg/custom/light'
+import { clock_a } from '@/config/svg/custom/clock-a'
+
+export const custom_svg_group: IConfigComponentGroup = {
+	groupType: 'custom_svg_group',
+	title: 'SVG组件',
+	list: [svg_text, switch_a, light_a, clock_a]
+}

package/src/config/svg/custom/light.ts

@@ -0,0 +1,29 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const light_a: IConfigItem = {
+	name: 'light',
+	tag: 'light-a',
+	title: '灯',
+	type: EDoneJsonType.CustomSvg,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		isOpen: {
+			title: '开关',
+			type: EConfigItemPropsType.Switch,
+			val: false
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/svg/custom/svg-text.ts

@@ -0,0 +1,54 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const svg_text: IConfigItem = {
+	name: 'svg-text',
+	title: '文字',
+	tag: 'svg-text',
+	type: EDoneJsonType.CustomSvg,
+	display: true,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	props: {
+		text: {
+			title: '文字内容',
+			type: EConfigItemPropsType.Input,
+			val: '文字'
+		},
+		fontFamily: {
+			title: '字体',
+			type: EConfigItemPropsType.Select,
+			val: 'Microsoft YaHei',
+			options: [
+				{
+					value: 'Microsoft YaHei',
+					label: '微软雅黑'
+				},
+				{
+					value: 'NSimSun',
+					label: '新宋体'
+				}
+			]
+		},
+		fontSize: {
+			title: '文字大小',
+			type: EConfigItemPropsType.InputNumber,
+			val: 15
+		},
+		fill: {
+			title: '文字颜色',
+			type: EConfigItemPropsType.Color,
+			val: '#000'
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/svg/custom/switch-a.ts

@@ -0,0 +1,29 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const switch_a: IConfigItem = {
+	name: 'switch-a',
+	title: '开关',
+	tag: 'switch-a',
+	type: EDoneJsonType.CustomSvg,
+	display: true,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	props: {
+		isOpen: {
+			title: '开关',
+			type: EConfigItemPropsType.Switch,
+			val: true
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/svg/index.ts

@@ -0,0 +1,12 @@
+import type { IConfigComponentGroup } from '../types'
+import { stateful_group } from './stateful'
+import { stateless_group } from './stateless'
+import { animation_group } from './animation'
+import { custom_svg_group } from './custom'
+
+export const svg_config: IConfigComponentGroup[] = Object.seal([
+	stateless_group,
+	stateful_group,
+	animation_group,
+	custom_svg_group
+])

package/src/config/svg/stateful/circuit-breaker.ts

@@ -0,0 +1,38 @@
+import { EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const circuit_breaker_svg_file: IConfigItem = {
+	name: 'circuit-breaker',
+	title: '断路器',
+	type: EDoneJsonType.File,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {},
+	state: {
+		OnOff: {
+			title: '开关',
+			default: false,
+			props: {
+				fill: {
+					openVal: '#00ff00',
+					closeVal: '#ff0000'
+				},
+				'fill-opacity': {
+					openVal: '0',
+					closeVal: '1'
+				}
+			}
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/svg/stateful/index.ts

@@ -0,0 +1,8 @@
+import type { IConfigComponentGroup } from '../../types'
+import { circuit_breaker_svg_file } from './circuit-breaker'
+
+export const stateful_group: IConfigComponentGroup = {
+	groupType: 'stateful',
+	title: '状态图标',
+	list: [circuit_breaker_svg_file]
+}

package/src/config/svg/stateless/alternator.ts

@@ -0,0 +1,28 @@
+import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const alternator_svg_file: IConfigItem = {
+	name: 'alternator',
+	title: '发电机',
+	type: EDoneJsonType.File,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {
+		fill: {
+			title: '填充色',
+			type: EConfigItemPropsType.Color,
+			val: '#00ff00'
+		}
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/svg/stateless/bot-2.ts

@@ -0,0 +1,22 @@
+import { EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const svg_bot_2: IConfigItem = {
+	name: 'bot-2',
+	title: '2号机',
+	type: EDoneJsonType.File,
+	display: true,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	props: {},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/svg/stateless/house.ts

@@ -0,0 +1,22 @@
+import { EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const svg_house: IConfigItem = {
+	name: 'house',
+	title: '房子',
+	type: EDoneJsonType.File,
+	display: true,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	props: {},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

package/src/config/svg/stateless/index.ts

@@ -0,0 +1,14 @@
+import type { IConfigComponentGroup } from '@/config/types'
+import { alternator_svg_file } from './alternator'
+import { svg_house } from './house'
+import { svg_bot_2 } from './bot-2'
+
+export const stateless_group: IConfigComponentGroup = {
+	groupType: 'stateless',
+	title: '静态图标',
+	list: [
+		alternator_svg_file,
+		svg_house,
+		svg_bot_2
+	]
+}