@zhangqingcq/vgce 0.0.27 → 0.0.29

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

@@ -1,52 +1,71 @@
-<script setup lang="ts">
-	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>
+<script setup lang="ts">
+	const props = defineProps<{
+		width: number
+		fontFamily: string
+		color: string
+		fontSize: number
+		bold: boolean
+	}>()
+
+	const styles = computed(() => ({
+		fontFamily: props.fontFamily,
+		color: props.color,
+		fontSize: props.fontSize + 'px',
+		fontWeight: props.bold ? 'bold' : 'normal'
+	}))
+
+	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()
+		return year.toString() + '年' + month.toString() + '月' + day.toString() + '日'
+	})
+	const week = computed(() => {
+		const d = now_date.value.getDay()
+		const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+		return weekday[d]
+	})
+	const time = computed(() => {
+		const hour = now_date.value.getHours()
+		const minute = now_date.value.getMinutes()
+		const second = now_date.value.getSeconds()
+		return (
+			(hour < 10 ? '0' + hour.toString() : hour.toString()) +
+			':' +
+			(minute < 10 ? '0' + minute.toString() : minute.toString()) +
+			':' +
+			(second < 10 ? '0' + second.toString() : second.toString())
+		)
+	})
+
+	onMounted(() => {
+		timer.value = setInterval(() => {
+			now_date.value = new Date() // 修改数据date
+		}, 500)
+	})
+	onUnmounted(() => {
+		clearInterval(timer.value)
+	})
+</script>
+<template>
+	<div class="now-time" :style="{ width: props.width + 'px' }">
+		<div :style="styles">{{ date }}</div>
+		<div class="flex mt-5px">
+			<div :style="styles">{{ week }}</div>
+			<div :style="styles">{{ time }}</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.now-time {
+		min-height: 40px;
+		min-width: 100px;
+		color: #c54e6a;
+
+		.flex {
+			justify-content: space-between;
+		}
+	}
+</style>

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

@@ -1,71 +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'
-	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>
+<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'
+	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 {
+		min-height: 300px;
+		min-width: 400px;
+	}
+</style>

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

@@ -1,37 +1,17 @@
-<script setup lang="ts">
-	// 文字的内容决定了长度 所以没办法预先定义中心点 导致连线有偏移
-	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>
+<script setup lang="ts">
+	// 文字的内容决定了长度 所以没办法预先定义中心点 导致连线有偏移
+
+	const emit = defineEmits(['resize'])
+	const props = defineProps<{ text?: string; bold: boolean }>()
+	watch(
+		() => props.text,
+		() => {
+			nextTick(function () {
+				emit('resize')
+			})
+		}
+	)
+</script>
+<template>
+	<text x="50" y="55" :style="{ 'font-weight': props.bold ? 'bold' : 'normal' }">{{ props.text }}</text>
+</template>

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+	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 1027 1024" :id="`${props.id}switch-demo-open`">
+			<path
+				d="M747.52 238.933333    H276.48    C122.88 238.933333 0 361.813333 0 512    s122.88 273.066667 276.48 273.066667    H750.933333    c150.186667 0 276.48-122.88 276.48-273.066667    s-126.293333-273.066667-279.893333-273.066667z"
+				fill="white"
+				fill-opacity=".01"
+				p-id="1537"
+				data-spm-anchor-id="a313x.manage_type_myprojects.0.i0.1adc3a81uCnBP5"
+			/>
+			<path
+				d="M747.52 238.933333    H276.48    C122.88 238.933333 0 361.813333 0 512    s122.88 273.066667 276.48 273.066667    H750.933333    c150.186667 0 276.48-122.88 276.48-273.066667    s-126.293333-273.066667-279.893333-273.066667z     m0 512    H276.48    C143.36 750.933333 34.133333 645.12 34.133333 512s109.226667-238.933333 242.346667-238.933333    H750.933333c133.12 0 242.346667 105.813333 242.346667 238.933333s-112.64 238.933333-245.76 238.933333z"
+				fill="#2c2c2c"
+				p-id="1531"
+				data-spm-anchor-id="a313x.manage_type_myprojects.0.i0.1adc3a81uCnBP5"
+			/>
+			<path
+				d="M238.933333 409.6c-37.546667 0-68.266667 27.306667-68.266666 61.44v85.333333c0 34.133333 30.72 61.44 68.266666 61.44s68.266667-27.306667 68.266667-61.44v-85.333333c0-34.133333-30.72-61.44-68.266667-61.44z m34.133334 146.773333c0 13.653333-17.066667 23.893333-34.133334 23.893334s-34.133333-10.24-34.133333-27.306667v-85.333333c0-13.653333 17.066667-23.893333 34.133333-23.893334s34.133333 10.24 34.133334 27.306667v85.333333zM460.8 409.6c-10.24 0-17.066667 6.826667-17.066667 17.066667v109.226666l-71.68-119.466666c-3.413333-6.826667-10.24-10.24-20.48-6.826667-6.826667 3.413333-13.653333 10.24-13.653333 17.066667v170.666666c0 10.24 6.826667 17.066667 17.066667 17.066667s17.066667-6.826667 17.066666-17.066667v-109.226666l71.68 119.466666c3.413333 6.826667 10.24 6.826667 13.653334 6.826667h3.413333c6.826667-3.413333 13.653333-10.24 13.653333-17.066667v-170.666666c3.413333-10.24-3.413333-17.066667-13.653333-17.066667zM750.933333 341.333333c-95.573333 0-170.666667 75.093333-170.666666 170.666667s75.093333 170.666667 170.666666 170.666667 170.666667-75.093333 170.666667-170.666667-75.093333-170.666667-170.666667-170.666667z"
+				fill="#5ad562"
+				p-id="1530"
+				data-spm-anchor-id="a313x.manage_type_myprojects.0.i1.1adc3a81uCnBP5"
+			/>
+		</symbol>
+		<symbol viewBox="0 0 1027 1024" :id="`${props.id}switch-demo-close`">
+			<path
+				d="M747.52 238.933333    H276.48    C122.88 238.933333 0 361.813333 0 512    s122.88 273.066667 276.48 273.066667    H750.933333    c150.186667 0 276.48-122.88 276.48-273.066667    s-126.293333-273.066667-279.893333-273.066667z"
+				fill="white"
+				fill-opacity=".01"
+				p-id="1536"
+				data-spm-anchor-id="a313x.manage_type_myprojects.0.i0.1adc3a81uCnBP5"
+			/>
+			<path
+				d="M747.52 238.933333    H276.48    C122.88 238.933333 0 361.813333 0 512    s122.88 273.066667 276.48 273.066667    H750.933333    c150.186667 0 276.48-122.88 276.48-273.066667    s-126.293333-273.066667-279.893333-273.066667z    m0 512    H276.48    C143.36 750.933333 34.133333 645.12 34.133333 512s109.226667-238.933333 242.346667-238.933333    H750.933333c133.12 0 242.346667 105.813333 242.346667 238.933333s-112.64 238.933333-245.76 238.933333z"
+				fill="#2c2c2c"
+				p-id="1535"
+				data-spm-anchor-id="a313x.manage_type_myprojects.0.i0.1adc3a81uCnBP5"
+			/>
+			<path
+				d="M273.066667 341.333333c-95.573333 0-170.666667 75.093333-170.666667 170.666667s75.093333 170.666667 170.666667 170.666667 170.666667-75.093333 170.666666-170.666667-75.093333-170.666667-170.666666-170.666667z"
+				fill="#bfbfbf"
+				p-id="1534"
+				data-spm-anchor-id="a313x.manage_type_myprojects.0.i0.1adc3a81KYNNkt"
+			/>
+			<path
+				d="M580.266667 409.6c-37.546667 0-68.266667 27.306667-68.266667 61.44v85.333333c0 34.133333 30.72 61.44 68.266667 61.44s68.266667-27.306667 68.266666-61.44v-85.333333c0-34.133333-30.72-61.44-68.266666-61.44z m34.133333 146.773333c0 13.653333-17.066667 27.306667-34.133333 27.306667s-34.133333-10.24-34.133334-27.306667v-85.333333c0-13.653333 17.066667-27.306667 34.133334-27.306667s34.133333 10.24 34.133333 27.306667v85.333333zM904.533333 409.6h-68.266666c-10.24 0-17.066667 6.826667-17.066667 17.066667v170.666666c0 10.24 6.826667 17.066667 17.066667 17.066667s17.066667-6.826667 17.066666-17.066667V512h17.066667c10.24 0 17.066667-6.826667 17.066667-17.066667s-6.826667-17.066667-17.066667-17.066666H853.333333v-34.133334h51.2c10.24 0 17.066667-6.826667 17.066667-17.066666s-6.826667-17.066667-17.066667-17.066667zM768 409.6h-68.266667c-10.24 0-17.066667 6.826667-17.066666 17.066667v170.666666c0 10.24 6.826667 17.066667 17.066666 17.066667s17.066667-6.826667 17.066667-17.066667V512h17.066667c10.24 0 17.066667-6.826667 17.066666-17.066667s-6.826667-17.066667-17.066666-17.066666H716.8v-34.133334h51.2c10.24 0 17.066667-6.826667 17.066667-17.066666s-6.826667-17.066667-17.066667-17.066667z"
+				fill="#707070"
+				p-id="1533"
+				data-spm-anchor-id="a313x.manage_type_myprojects.0.i2.1adc3a81KYNNkt"
+			/>
+		</symbol>
+		<use :xlink:href="`#${props.id}switch-demo-${props.isOpen ? 'open' : 'close'}`" width="100" height="100" />
+	</g>
+</template>

package/src/config/index.ts

@@ -4,7 +4,7 @@ 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 SwitchR from '@/config/files/switch-r.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'
@@ -19,7 +19,7 @@ export const vueComp: Record<string, any> = {
 	'el-tag': ElTag,
 	'common-table': CommonTable,
 	'pie-charts': PieCharts,
-	'switch-a': SwitchA,
+	'switch-r': SwitchR,
 	'now-time': NowTime,
 	'light-a': LightA,
 	'clock-a': ClockA

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

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

package/src/config/svg/{stateless/alternator.ts → animation/thermometer.ts}

@@ -1,9 +1,8 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
-
-export const alternator_svg_file: IConfigItem = {
-	name: 'alternator',
-	title: '发电机',
+export const thermometer: IConfigItem = {
+	name: 'thermometer',
+	title: '温度计',
 	type: EDoneJsonType.File,
 	config: {
 		can_zoom: true,
@@ -11,13 +10,7 @@ export const alternator_svg_file: IConfigItem = {
 		actual_rect: true
 	},
 	display: true,
-	props: {
-		fill: {
-			title: '填充色',
-			type: EConfigItemPropsType.Color,
-			val: '#00ff00'
-		}
-	},
+	props: {},
 	common_animations: {
 		val: '',
 		delay: 'delay-0s',

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

@@ -1,11 +1,11 @@
 import type { IConfigComponentGroup } from '../../types'
 import { svg_text } from './svg-text'
-import { switch_a } from './switch-a'
+import { switch_r } from './switch-r'
 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]
+	list: [svg_text, switch_r, light_a, clock_a]
 }

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

@@ -30,18 +30,42 @@ export const svg_text: IConfigItem = {
 				{
 					value: 'NSimSun',
 					label: '新宋体'
+				},
+				{
+					value: 'KaiTi',
+					label: '楷体'
 				}
 			]
 		},
 		fontSize: {
 			title: '文字大小',
 			type: EConfigItemPropsType.InputNumber,
-			val: 15
+			val: 18
 		},
 		fill: {
 			title: '文字颜色',
 			type: EConfigItemPropsType.Color,
 			val: '#000'
+		},
+		bold: {
+			title: '文字加粗',
+			type: EConfigItemPropsType.Switch,
+			val: false
+		},
+		writingMode: {
+			title: '文字朝向',
+			type: EConfigItemPropsType.Select,
+			val: 'horizontal-tb',
+			options: [
+				{
+					value: 'horizontal-tb',
+					label: '水平'
+				},
+				{
+					value: 'vertical-rl',
+					label: '垂直'
+				}
+			]
 		}
 	},
 	common_animations: {

package/src/config/svg/custom/{switch-a.ts → switch-r.ts}

@@ -1,10 +1,10 @@
 import { EConfigItemPropsType, EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const switch_a: IConfigItem = {
-	name: 'switch-a',
+export const switch_r: IConfigItem = {
+	name: 'switch-r',
 	title: '开关',
-	tag: 'switch-a',
+	tag: 'switch-r',
 	type: EDoneJsonType.CustomSvg,
 	display: true,
 	config: {
@@ -16,7 +16,7 @@ export const switch_a: IConfigItem = {
 		isOpen: {
 			title: '开关',
 			type: EConfigItemPropsType.Switch,
-			val: true
+			val: false
 		}
 	},
 	common_animations: {

package/src/config/svg/stateful/alert-light.ts

@@ -0,0 +1,33 @@
+import { EDoneJsonType } from '@/config/types'
+import type { IConfigItem } from '@/config/types'
+
+export const svg_alert_light: IConfigItem = {
+	name: 'alert-light',
+	title: '警示灯',
+	type: EDoneJsonType.File,
+	config: {
+		can_zoom: true,
+		have_anchor: true,
+		actual_rect: true
+	},
+	display: true,
+	props: {},
+	defaultState: 'yellow',
+	state: {
+		green: {
+			label: '正常',
+			fill: '#00ff00',
+			fillOpacity: '1'
+		},
+		yellow: { label: '请注意', fill: '#ffff00', fillOpacity: '1' },
+		red: { label: '报警', fill: '#ff0000', fillOpacity: '1' },
+		white: { label: '关闭', fill: '#ffffff', fillOpacity: '0' }
+	},
+	common_animations: {
+		val: '',
+		delay: 'delay-0s',
+		speed: 'slow',
+		repeat: 'infinite'
+	},
+	events: []
+}

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

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

package/src/config/svg/stateless/{house.ts → bot-9.ts}

@@ -1,9 +1,9 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const svg_house: IConfigItem = {
-	name: 'house',
-	title: '房子',
+export const svg_bot_9: IConfigItem = {
+	name: 'bot-9',
+	title: '9号机',
 	type: EDoneJsonType.File,
 	display: true,
 	config: {

package/src/config/svg/stateless/{sheet-border.ts → hamburger.ts}

@@ -1,9 +1,9 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const sheet_border: IConfigItem = {
-	name: 'sheet-border',
-	title: '田字格',
+export const svg_hamburger: IConfigItem = {
+	name: 'hamburger',
+	title: '汉堡',
 	type: EDoneJsonType.File,
 	display: true,
 	config: {

package/src/config/svg/{stateful/circuit-breaker.ts → stateless/hotpot.ts}

@@ -1,33 +1,17 @@
 import { EDoneJsonType } from '@/config/types'
 import type { IConfigItem } from '@/config/types'
 
-export const circuit_breaker_svg_file: IConfigItem = {
-	name: 'circuit-breaker',
-	title: '断路器',
+export const svg_hotpot: IConfigItem = {
+	name: 'hotpot',
+	title: '火锅',
 	type: EDoneJsonType.File,
+	display: true,
 	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',