danny
/
vue-webtopo-svgeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 工具栏布局 配置

Browse Source
Re-1.0
咬轮猫 3 years ago
parent 5ff6f6184a
commit ed7a38bbdb
15 changed files with 253 additions and 2 deletions
Show Stats Download Patch File Download Diff File

8
src/assets/svgs/alternator.svg
Unescape Escape View File

@ -0,0 +1,8 @@
<?xml version="1.0" standalone="no"?>
<svg t="1658190759246" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2410"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<path d="M512 273.194667A238.805333 238.805333 0 1 1 273.194667 512 238.805333 238.805333 0 0 1 512 273.194667M512 234.666667a277.333333 277.333333 0 1 0 277.333333 277.333333 277.333333 277.333333 0 0 0-277.333333-277.333333z" p-id="2411"></path>
<path d="M675.157333 556.928a14.677333 14.677333 0 0 0-12.8 7.445333 96 96 0 0 1-137.109333 24.661334 125.098667 125.098667 0 0 0-188.032 24.149333 14.208 14.208 0 0 0-1.28 2.133333 5.802667 5.802667 0 0 0-0.661333 1.408 14.656 14.656 0 0 0 24.149333 15.68 6.272 6.272 0 0 0 1.28-1.493333 96.832 96.832 0 0 1 13.248-16.490667 95.765333 95.765333 0 0 1 124.629333-9.301333 125.077333 125.077333 0 0 0 189.269334-26.176 5.824 5.824 0 0 0 0.682666-1.493333 14.634667 14.634667 0 0 0-13.44-20.437334z" p-id="2412"></path>
<path d="M593.834667 444.778667l-12.8 1.557333c-0.192 13.674667-0.384 27.733333-0.384 43.2v9.621333a89.6 89.6 0 0 1-47.296 12.8 76.16 76.16 0 0 1 1.173333-152.277333 81.066667 81.066667 0 0 1 42.666667 10.666667l-0.405334 33.813333h-11.648l-8.213333-32.426667a41.088 41.088 0 0 0-18.965333-4.117333c-29.333333 0-50.837333 23.104-50.837334 68.053333 0 42.666667 20.714667 68.266667 49.642667 68.266667a65.088 65.088 0 0 0 17.792-2.304v-12.8c0-14.272-0.192-27.946667-0.597333-42.026667l-21.461334-2.133333v-6.848h61.376z" p-id="2413"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

5
src/assets/svgs/circuit-breaker.svg
Unescape Escape View File

@ -0,0 +1,5 @@
<svg t="1658207779084" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1742"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<rect width="150" height="300" x="437" y="362"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 257 B

15
src/assets/svgs/traction-transformer.svg
Unescape Escape View File

@ -0,0 +1,15 @@
<?xml version="1.0" standalone="no"?>
<svg t="1658198367300" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1547"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<defs>
<style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style>
</defs>
<path d="M500.181333 308.757333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z" p-id="1548"></path>
<path d="M500.181333 478.741333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z" p-id="1549"></path>
<path d="M500.266667 234.666667a9.557333 9.557333 0 0 1 9.557333 9.557333v54.869333a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.848A9.557333 9.557333 0 0 1 500.266667 234.666667z" p-id="1550"></path>
<path d="M500.266667 715.349333a9.557333 9.557333 0 0 1 9.557333 9.557334v54.890666a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.869333a9.557333 9.557333 0 0 1 9.557334-9.578667z" p-id="1551"></path>
<path d="M500.266667 446.357333a10.666667 10.666667 0 0 1-10.218667-6.186666l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186667 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186667l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z" p-id="1552"></path>
<path d="M500.266667 681.024a10.666667 10.666667 0 0 1-10.218667-6.186667l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186666 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186666l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z" p-id="1553"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

6
src/components/svg-analysis/index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template>
<svg aria-hidden="true">
<use :xlink:href="symbolId" />
<use :xlink:href="symbolId" v-bind="props.props" />
</svg>
</template>
<script setup lang="ts">
@ -9,6 +9,10 @@
name: {
type: String,
required: true
},
props: {
type: Object,
default: () => {}
}
});
const symbolId = computed(() => `#svg-${props.name}`);

85
src/components/webtopo-svgedit/components/left-panel/index.vue
Unescape Escape View File

@ -1 +1,84 @@
<template><div>左侧</div></template>
<!-- 左侧工具栏 -->
<template>
<div>
<div class="flex items-center my-5px">
<div class="source-repo">组件库 :</div>
<el-select v-model="select_lib" placeholder="请选择组件库" @change="libChange">
<el-option
v-for="(item, key) in global_store.config_center"
:key="key"
:label="key"
:value="item"
></el-option>
</el-select>
</div>
<el-collapse v-model="activeNames" v-for="item of config_center" :key="item.title">
<el-collapse-item :name="item.groupType">
<template #title>
<div style="font-weight: bolder">{{ item.title }}</div>
</template>
<div class="component-group flex flex-warp">
<div v-for="iconitem in item.list" class="ideal" :key="iconitem.name">
<div class="flex component-item items-center ml-10px">
<el-icon :size="40" class="flex items-center">
<svg-analysis
:name="iconitem.name"
:props="handleIconProps(iconitem.props)"
></svg-analysis>
</el-icon>
<div>{{ iconitem.title }}</div>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElSelect, ElOption, ElCollapse, ElCollapseItem, ElIcon } from 'element-plus';
import { IConfigComponentGroup, IConfigItemProps } from '../../../../config-center/types';
import { useGlobalStore } from '../../../../store/global';
import SvgAnalysis from '../../../svg-analysis/index.vue';
const global_store = useGlobalStore();
const select_lib = ref('电力系统');
const config_center = ref<IConfigComponentGroup[]>(global_store.config_center.电力系统);
const activeNames = ref(['stateful', 'stateless']);
const libChange = (val: any) => {
config_center.value = [];
config_center.value = val;
console.log(val, 71474);
};
const handleIconProps = (svg_item: IConfigItemProps) => {
let temp = {};
for (const key in svg_item) {
temp = { ...temp, ...{ [key]: svg_item[key].val } };
}
return temp;
};
</script>
<style scoped lang="less">
.component-item {
width: 100px;
height: 30px;
border: 1px solid #f0f0f0;
border-radius: 4px;
box-sizing: border-box;
overflow: hidden;
&:hover {
cursor: move;
// outline: 1px solid #409eff;
box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}
}
.source-repo {
min-width: 60px;
font-weight: bolder;
font-style: italic;
font-size: 15px;
}
</style>

6
src/config-center/index.ts
Unescape Escape View File

@ -0,0 +1,6 @@
import { power_system_config_center } from './power-system';
import { IConfigCenter } from './types';
export const configCenter: IConfigCenter = {
电力系统: power_system_config_center
};

8
src/config-center/power-system/index.ts
Unescape Escape View File

@ -0,0 +1,8 @@
import { IConfigComponentGroup } from '../types';
import { stateful_group } from './stateful';
import { stateless_group } from './stateless';
export const power_system_config_center: IConfigComponentGroup[] = Object.seal([
stateful_group,
stateless_group
]);

17
src/config-center/power-system/stateful/circuit-breaker/index.ts
Unescape Escape View File

@ -0,0 +1,17 @@
import { EConfigItemPropsType, EConfigItemStateType, IConfigItem } from '../../../types';
export const power_system_circuit_breaker: IConfigItem = {
name: 'circuit-breaker',
title: '断路器',
props: {
fill: {
title: '填充色',
type: EConfigItemPropsType.Color,
val: '#ff0000'
}
},
state: {
type: EConfigItemStateType.Switch,
default: false
}
};

8
src/config-center/power-system/stateful/index.ts
Unescape Escape View File

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

13
src/config-center/power-system/stateless/alternator/index.ts
Unescape Escape View File

@ -0,0 +1,13 @@
import { EConfigItemPropsType, IConfigItem } from '../../../types';
export const power_system_alternator: IConfigItem = {
name: 'alternator',
title: '发电机',
props: {
fill: {
title: '填充色',
type: EConfigItemPropsType.Color,
val: '#ff0000'
}
}
};

8
src/config-center/power-system/stateless/index.ts
Unescape Escape View File

@ -0,0 +1,8 @@
import { IConfigComponentGroup } from '../../types';
import { power_system_alternator } from './alternator';
import { power_system_traction_transformer } from './traction-transformer';
export const stateless_group: IConfigComponentGroup = {
groupType: 'stateless',
title: '无状态',
list: [power_system_alternator, power_system_traction_transformer]
};

13
src/config-center/power-system/stateless/traction-transformer/index.ts
Unescape Escape View File

@ -0,0 +1,13 @@
import { EConfigItemPropsType, IConfigItem } from '../../../types';
export const power_system_traction_transformer: IConfigItem = {
name: 'traction-transformer',
title: '牵引变',
props: {
fill: {
title: '填充色',
type: EConfigItemPropsType.Color,
val: '#ff0000'
}
}
};

42
src/config-center/types.ts
Unescape Escape View File

@ -0,0 +1,42 @@
/**
* 组件分组数据格式
* @property {string} groupType 组件分组类型
* @property {string} title 组件分组标题
* @property {Array} list 分组包含的组件项列表
* @export
* @interface IComponentGroup
*/
export interface IConfigComponentGroup {
groupType: string;
title: string;
list: Array<IConfigItem>;
}
export interface IConfigCenter {
[key: string]: IConfigComponentGroup[];
}
export interface IConfigItem {
name: string;
title: string;
props: IConfigItemProps;
state?: IConfigItemState;
}
export interface IConfigItemProps {
[key: string]: {
title: string;
type: EConfigItemPropsType;
val: string;
};
}
export enum EConfigItemPropsType {
Input = 'Input',
Color = 'Color',
InputNumber = 'InputNumber'
}
export interface IConfigItemState {
type: EConfigItemStateType;
default: any;
}
export enum EConfigItemStateType {
Switch = 'Switch'
}

16
src/store/global/index.ts
Unescape Escape View File

@ -0,0 +1,16 @@
import { defineStore } from 'pinia';
import { configCenter } from '../../config-center';
import { IGlobalStore } from './types';
/**
* 全局共享状态
*/
export const useGlobalStore = defineStore('global-store', {
state: (): IGlobalStore => {
return {
config_center: configCenter
};
},
getters: {},
actions: {}
});

5
src/store/global/types.ts
Unescape Escape View File

@ -0,0 +1,5 @@
import { IConfigCenter } from '../../config-center/types';
export interface IGlobalStore {
config_center: IConfigCenter;
}
Write Preview
Loading…
Cancel
Save